Chrome 源码阅读:跟踪一个鼠标事件的流程

news2024/11/19 23:12:51

我们通过在关键节点打断点的方式,去分析一个鼠标事件的流程。

我们知道chromium是多进程模型,那么,我们可以推测:一个鼠标消息先从主进程产生,再通过跨进程通信发送给渲染进程,渲染进程再发送给WebFrame,最后被派发到目标Node上

于是,首先,我们在主进程,找到鼠标时间的最终消费点,打上断点,进行分析:

主进程继续往下走,就是把事件通过跨进程通信框架mojo发送过去的逻辑了:

接下来,我们要换个进程,在渲染进程打上断点,看看消息过来后,怎么走的流程:

首先搜索这个mojom的事件,确认渲染进程断点落脚处:

题外话:这个input_handler.mojom.cc到了渲染进程那就成了input_handler.mojom-blink.cc了。

这两个文件99%相似,只有少量的不同(命名空间、基础类型):

这两个类的基类是一样的:

这个类的头文件写明了,是由什么工具生成的:

很好奇生成源,我们也去看看:

// Copyright 2020 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

module blink.mojom;

import "cc/mojom/browser_controls_state.mojom";
import "cc/mojom/overscroll_behavior.mojom";
import "cc/mojom/touch_action.mojom";
import "mojo/public/mojom/base/string16.mojom";
import "mojo/public/mojom/base/time.mojom";
import "third_party/blink/public/mojom/input/gesture_event.mojom";
import "third_party/blink/public/mojom/input/handwriting_gesture_result.mojom";
import "third_party/blink/public/mojom/input/input_event_result.mojom";
import "third_party/blink/public/mojom/input/input_event.mojom";
import "third_party/blink/public/mojom/input/pointer_lock_context.mojom";
import "third_party/blink/public/mojom/input/pointer_lock_result.mojom";
import "third_party/blink/public/mojom/input/ime_host.mojom";
import "third_party/blink/public/mojom/input/stylus_writing_gesture.mojom";
import "third_party/blink/public/mojom/input/touch_event.mojom";
import "third_party/blink/public/mojom/selection_menu/selection_menu_behavior.mojom";
import "ui/base/ime/mojom/ime_types.mojom";
import "ui/events/mojom/event_constants.mojom";
import "ui/events/mojom/event_latency_metadata.mojom";
import "ui/events/mojom/event.mojom";
import "ui/events/mojom/scroll_granularity.mojom";
import "ui/gfx/geometry/mojom/geometry.mojom";
import "ui/gfx/range/mojom/range.mojom";
import "ui/latency/mojom/latency_info.mojom";

[EnableIf=is_android]
import "third_party/blink/public/mojom/input/synchronous_compositor.mojom";

// These structs are purposely duplicated from ui/events/mojom/event.mojom.
// They map WebInputEvent <-> WebInputEvent across mojo.
// We have to work at unifying them. The current problem is that the browser
// uses WebInputEvents inside the render widget host and input router. Once
// we move these to ui::Event's then we can get rid of these duplicated
// mojom structs. Ideally the browser would use ui::Event up until we
// pass the events into the renderer and just use a StructTraits to perform
// conversion from ui::mojom::Event --> blink::WebInputEvent.
struct KeyData {
  int32 dom_key;
  int32 dom_code;
  int32 windows_key_code;
  int32 native_key_code;
  bool is_system_key;
  bool is_browser_shortcut;
  mojo_base.mojom.String16 text;
  mojo_base.mojom.String16 unmodified_text;
};

struct PointerData {
  int32 pointer_id;
  float force;
  double tilt_x;
  double tilt_y;
  float tangential_pressure;
  int32 twist;
  blink.mojom.Button button;
  ui.mojom.EventPointerType pointer_type;
  int32 movement_x;
  int32 movement_y;
  bool is_raw_movement_event;
  gfx.mojom.PointF widget_position;
  gfx.mojom.PointF screen_position;
  MouseData? mouse_data;
  int32 device_id;
};

struct WheelData {
  float delta_x;
  float delta_y;
  float wheel_ticks_x;
  float wheel_ticks_y;
  float acceleration_ratio_x;
  float acceleration_ratio_y;
  uint8 phase;
  uint8 momentum_phase;
  blink.mojom.DispatchType cancelable;
  uint8 event_action;
  uint8 delta_units;
};

struct MouseData {
  int32 click_count;
  WheelData? wheel_data;
};

struct ScrollUpdate {
  float velocity_x;
  float velocity_y;
};

struct ScrollData {
  float delta_x;
  float delta_y;
  ui.mojom.ScrollGranularity delta_units;
  bool target_viewport;
  blink.mojom.InertialPhaseState inertial_phase;
  bool synthetic;
  int32 pointer_count;
  // Used for GestureScrollBegin type only. If this is true, we use the scroll
  // sequence to do cursor control rather than scroll.
  bool cursor_control;
  ScrollUpdate? update_details;
};

struct PinchBeginData {
  bool needs_wheel_event;
};

struct PinchUpdateData {
  float scale;
  bool zoom_disabled;
  bool needs_wheel_event;
};

struct PinchEndData {
  bool needs_wheel_event;
};

struct FlingData {
  float velocity_x;
  float velocity_y;
  bool target_viewport;
  bool prevent_boosting;
};

struct TapData {
  int32 tap_count;
  bool needs_wheel_event;
};

struct TapDownData {
  int32 tap_down_count;
};

struct GestureData {
  gfx.mojom.PointF screen_position;
  gfx.mojom.PointF widget_position;
  blink.mojom.GestureDevice source_device;
  bool is_source_touch_event_set_blocking;
  ui.mojom.EventPointerType primary_pointer_type;
  int32 primary_unique_touch_event_id;
  int32 unique_touch_event_id;
  gfx.mojom.Size? contact_size;
  ScrollData? scroll_data;
  PinchBeginData? pinch_begin_data;
  PinchUpdateData? pinch_update_data;
  PinchEndData? pinch_end_data;
  TapData? tap_data;
  TapDownData? tap_down_data;
  FlingData? fling_data;
};

struct TouchPoint {
  blink.mojom.TouchState state;
  float radius_x;
  float radius_y;
  float rotation_angle;
  PointerData pointer_data;
};

struct TouchData {
  blink.mojom.DispatchType cancelable;
  bool moved_beyond_slop_region;
  bool touch_start_or_first_move;
  bool hovering;
  uint32 unique_touch_event_id;
  array<TouchPoint> touches;
};

struct Event {
  blink.mojom.EventType type;
  int32 modifiers;
  mojo_base.mojom.TimeTicks timestamp;
  ui.mojom.LatencyInfo latency;
  ui.mojom.EventLatencyMetadata event_latency_metadata;
  KeyData? key_data;
  PointerData? pointer_data;
  GestureData? gesture_data;
  TouchData? touch_data;
};

// Represents the current state of overscroll.
struct DidOverscrollParams {
  gfx.mojom.Vector2dF accumulated_overscroll;
  gfx.mojom.Vector2dF latest_overscroll_delta;
  gfx.mojom.Vector2dF current_fling_velocity;
  gfx.mojom.PointF causal_event_viewport_point;
  cc.mojom.OverscrollBehavior overscroll_behavior;
};

// A struct wrapper for the TouchAction enumeration because
// enumerations cannot be optional.
struct TouchActionOptional {
  cc.mojom.TouchAction touch_action;
};

// Types related to sending edit commands to the renderer.
struct EditCommand {
  string name;
  string value;
};

// A structure that indicates selection offsets if the selection could be
// established.
struct SelectAroundCaretResult {
  // The offset differences between the extended selection and the initial
  // selection (which is a caret).
  int32 extended_start_adjust;
  int32 extended_end_adjust;
  // The offset differences between the word selection (regardless of the
  // extended selection granularity) and the initial selection (which is a
  // caret).
  int32 word_start_adjust;
  int32 word_end_adjust;
};

// GENERATED_JAVA_ENUM_PACKAGE: org.chromium.blink_public.input
// GENERATED_JAVA_CLASS_NAME_OVERRIDE: SelectionGranularity
enum SelectionGranularity {
  kWord,
  kSentence,
};

// An enumeration that describes the allowed non-directional pan action for the
// element under pointer being considered.
enum PanAction {
  // No pan action allowed.
  kNone,
  // Pan action is scroll.
  kScroll,
  // Pan action moves cursor when initial touch move is in horizontal direction,
  // or scrolls in the vertical direction.
  kMoveCursorOrScroll,
  // Pan action is stylus writable.
  kStylusWritable,
};

// Interface exposed by the browser to the renderer.
interface WidgetInputHandlerHost {
  // When the renderer's main thread computes the touch action, send this to the
  // browser.
  SetTouchActionFromMain(cc.mojom.TouchAction touch_action);

  // Sets the pan action possible for the element under pointer which could be
  // one of the actions described under enum PanAction. Note that this is
  // different from TouchAction and does not contain directional pan info.
  SetPanAction(PanAction pan_action);

  // Sent by the compositor when input scroll events are dropped due to bounds
  // restrictions on the root scroll offset.
  DidOverscroll(DidOverscrollParams params);

  // Sent by the compositor when a GSB has started scrolling the viewport.
  DidStartScrollingViewport();

  // Required for cancelling an ongoing input method composition.
  ImeCancelComposition();

  // Sends the character bounds after every composition change
  // to always have correct bound info.
  ImeCompositionRangeChanged(gfx.mojom.Range range,
                             array<gfx.mojom.Rect>? character_bounds,
                             array<gfx.mojom.Rect>? line_bounds);

  // Updates the mouse capture state of this widget. While capture is enabled,
  // all mouse events, including those that don't hittest to this widget, will
  // be targeted to this widget. This enables Blink to behave correctly when
  // a scrollbar is being dragged, or text is being drag-highlighted, even
  // when the mouse passes across different RenderWidget areas.
  SetMouseCapture(bool capture);

  // Updates the browser whether this main frame widget has ongoing autoscroll
  // selection. Any further mouse up event should always be dispatched to the
  // main frame in addition to it's event target (OOP child frame) if the state
  // is active. This API should only ever be called on the InputHandler for a
  // main frame's RenderWidgetHost.
  SetAutoscrollSelectionActiveInMainFrame(bool autoscroll_selection);

  // Requests locking the target of mouse events to a single element and
  // removing the cursor from view.  Mostly used by the Pointer Lock API.
  // See https://www.w3.org/TR/pointerlock/ for more info. This call is
  // also used by Pepper Flash.
  // |from_user_gesture| indicates whether this request came from a user
  // gesture or not.
  // |unadjusted_movement| indicates whether the request asked for raw mouse
  // movement data or just what the operating system returns (often accelerated
  // mouse movement).
  // |result| kSuccess if the mouse has been locked or the appropriate error
  // reason if not.
  // |context| is one end of a mojo pipe that will stay connected as long as
  // the mouse is locked. Is a NullRemote if |result| is not kSuccess.
  RequestMouseLock(bool from_user_gesture,
                   bool unadjusted_movement)
      => (PointerLockResult result,
          pending_remote<blink.mojom.PointerLockContext>? context);
};

// This interface provides the input actions associated with the FrameWidget.
// Other input actions may also be dispatched via the WidgetInputHandler
// interface. If frame input actions are dispatched the WidgetInputHandler
// should be fetched via the associated interface request so that input calls
// remain in order. See https://goo.gl/x4ee8A for more details.
interface FrameWidgetInputHandler {
  // Adds text decorations between a given valid start and end offsets in the
  // currently focused editable field.
  AddImeTextSpansToExistingText(
    uint32 start, uint32 end, array<ui.mojom.ImeTextSpan> ime_text_spans);

  // Clears text decorations type between a given valid start and end offsets
  // in the currently focused editable field.
  ClearImeTextSpansByType(
    uint32 start, uint32 end, ui.mojom.ImeTextSpanType type);

  // Sets the text composition to be between the given start and end offsets in
  // the currently focused editable field.
  SetCompositionFromExistingText(
      int32 start, int32 end, array<ui.mojom.ImeTextSpan> ime_text_spans);

  // Deletes the current selection plus the specified number of characters
  // before and after the selection or caret.
  ExtendSelectionAndDelete(int32 before, int32 after);

  // Deletes the current selection plus the specified number of characters
  // before and after the selection or caret.
  ExtendSelectionAndReplace(uint32 before,
                            uint32 after,
                            mojo_base.mojom.String16 replacement_text);

  // Deletes text before and after the current cursor position, excluding the
  // selection. The lengths are supplied in Java chars (UTF-16 Code Unit),
  // not in code points or in glyphs.
  DeleteSurroundingText(int32 before, int32 after);

  // Deletes text before and after the current cursor position, excluding the
  // selection. The lengths are supplied in code points, not in Java chars
  // (UTF-16 Code Unit) or in glyphs. Does nothing if there are one or more
  // invalid surrogate pairs in the requested range
  DeleteSurroundingTextInCodePoints(int32 before, int32 after);

  // Selects between the given start and end offsets in the currently focused
  // editable field.
  SetEditableSelectionOffsets(int32 start, int32 end);

  // Stylus Writing - perform Gesture action in input using gesture data.
  HandleStylusWritingGestureAction(
    blink.mojom.StylusWritingGestureData gesture_data)
      => (HandwritingGestureResult result);

  // Message payload is the name/value of a WebCore edit command to execute.
  ExecuteEditCommand(string command, mojo_base.mojom.String16? value);

  // These messages are typically generated from context menus and request the
  // renderer to apply the specified operation to the current selection.
  Undo();
  Redo();
  Cut();
  Copy();
  CopyToFindPboard();
  CenterSelection();
  Paste();
  PasteAndMatchStyle();
  Delete();
  SelectAll();
  CollapseSelection();

  // Pushed from the browser to the renderer each time the IME is activated,
  // e.g. an editable element becomes focused.
  [EnableIf=is_android]
  PassImeRenderWidgetHost(pending_remote<ImeRenderWidgetHost> remote);

  // Replaces the selected region or a word around the cursor with the
  // specified string.
  Replace(mojo_base.mojom.String16 word);

  // Replaces the misspelling in the selected region with the specified string.
  ReplaceMisspelling(mojo_base.mojom.String16 word);

  // Requests the renderer to select the region between two points.
  // Expects a SelectRange_ACK message when finished.
  SelectRange(gfx.mojom.Point base, gfx.mojom.Point extent);

  // Sent by the browser to ask the renderer to adjust the selection start and
  // end points by the given amounts. A negative amount moves the selection
  // towards the beginning of the document, a positive amount moves the
  // selection towards the end of the document. Will send show selection menu
  // event when needed.
  AdjustSelectionByCharacterOffset(
      int32 start, int32 end, SelectionMenuBehavior behavior);

  // Requests the renderer to select the specified granularity around caret and
  // to potentially show the selection handles and / or context menu after
  // selection.
  // Expects ack with new selection information when finished, or null if the
  // selection failed.
  SelectAroundCaret(SelectionGranularity granularity, bool should_show_handle,
                    bool should_show_context_menu)
      => (SelectAroundCaretResult? result);

  // Requests the renderer to move the selection extent point to a new position.
  // Expects a MoveRangeSelectionExtent_ACK message when finished.
  MoveRangeSelectionExtent(gfx.mojom.Point extent);

  // Tells the renderer to scroll the currently focused node into view only if
  // the currently focused node is a Text node (textfield, text area or content
  // editable divs).
  ScrollFocusedEditableNodeIntoView();

  // Replies when the next PageScaleAnimation has completed. Can only be called
  // on the outermost main frame. Can be used to reliably wait for a
  // ScrollFocusedEditableNodeIntoView to complete since that may create a
  // PageScaleAnimation which can take several frames to complete.
  // ScrollFocusedEditableNodeIntoView cannot use a reply callback for this
  // since it may be called on a subframe but the scroll will be completed in
  // another renderer when it bubbles up to the root. Additionally, the caller
  // may not be the one to have called ScrollFocusedEditableNodeIntoView; for
  // example, a test that simulates tapping an input box.
  WaitForPageScaleAnimationForTesting() => ();

  // Requests the renderer to move the caret selection toward the point.
  MoveCaret(gfx.mojom.Point point);
};

// An enumeration describing the active and focus states. If a widget is
// focused then it must also be active, therefore there is no focused and
// not active value in this enumeration. All widgets in a tab will have
// the same active state. Active state is tab specific, and focus state is
// frame specific. See
// https://www.chromium.org/developers/design-documents/aura/focus-and-activation/
enum FocusState
{
  kFocused,
  kNotFocusedAndActive,
  kNotFocusedAndNotActive
};

// Interface exposed by the renderer to the browser. This class represents
// an input interface for an associated Widget object. See FrameWidgetInputHandler
// for an interface at the frame level.
interface WidgetInputHandler {
  // Tells widget focus has been changed.
  SetFocus(FocusState state);

  // Tells widget mouse capture has been lost.
  MouseCaptureLost();

  // This message notifies the renderer that the next key event is bound to one
  // or more pre-defined edit commands. If the next key event is not handled
  // by blink, the specified edit commands shall be executed against current
  // focused frame.
  // Parameters
  // * edit_commands
  //   See t_p/b/renderer/core/editing/commands/editing_command_type.h
  //   Contains one or more edit commands.
  // See t_p/b/renderer/core/editing/commands/editor_command.cc for
  // detailed definition of webkit edit commands.
  //
  // This message must be sent just before sending a key event.
  SetEditCommandsForNextKeyEvent(array<EditCommand> commands);

  // Sends the cursor visibility state to the render widget.
  CursorVisibilityChanged(bool visible);

  // This message sends a string being composed with an input method.
  // Note, the response is specifically for Devtools to learn about completion
  ImeSetComposition(mojo_base.mojom.String16 text,
                    array<ui.mojom.ImeTextSpan> ime_text_spans,
                    gfx.mojom.Range range, int32 start, int32 end) => ();

  // This message deletes the current composition, inserts specified text, and
  // moves the cursor.
   // Note, the response is specifically for Devtools to learn about completion
  ImeCommitText(mojo_base.mojom.String16 text,
                array<ui.mojom.ImeTextSpan> ime_text_spans,
                gfx.mojom.Range range, int32 relative_cursor_position) => ();

  // This message inserts the ongoing composition.
  ImeFinishComposingText(bool keep_selection);

  // Request from browser to update text input state.
  RequestTextInputStateUpdate();

  // Request from browser to update the cursor and composition information which
  // will be sent through ImeCompositionRangeChanged. Setting
  // |immediate_request| to true  will lead to an immediate update. If
  // |monitor_updates| is set to true then changes to text selection or regular
  // updates in each compositor frame (when there is a change in composition
  // info) will lead to updates being sent to the browser.
  RequestCompositionUpdates(bool immediate_request, bool monitor_request);

  // Sends an input event to the render widget. The browser should use this
  // API if it wants to know about the result of the rendering handling
  // the event. The callback may be delayed based on the event running on
  // the main thread so DispatchNonBlockingEvent is always preferred if
  // you don't require notification.
  DispatchEvent(Event event)
      => (blink.mojom.InputEventResultSource source,
         ui.mojom.LatencyInfo updated_latency,
         blink.mojom.InputEventResultState state,
         DidOverscrollParams? overscroll,
         TouchActionOptional? touch_action);

  // Sends a non-blocking input event to the render widget. The behaviour
  // of this API is the same as DispatchEvent just that there is no callback
  // after the event is processed.
  DispatchNonBlockingEvent(Event event);

  // Forces input to be flushed and resolves the callback only once the input
  // has been fully processed, meaning its effects are visible to the full
  // system. In practice, this will force a redraw and wait until the new
  // CompositorFrame (containing all changes caused by prior input) has been
  // displayed.
  WaitForInputProcessed() => ();

  // Attach the synchronous compositor interface. This method only
  // should be called for Android WebView.
  [EnableIf=is_android]
  AttachSynchronousCompositor(
      pending_remote<SynchronousCompositorControlHost> control_host,
      pending_associated_remote<SynchronousCompositorHost> host,
      pending_associated_receiver<SynchronousCompositor> compositor_request);

  // Return an associated FrameWidgetInputHandler interface so that input
  // messages to the frame associated with this widget can be sent
  // serially.
  GetFrameWidgetInputHandler(
      pending_associated_receiver<FrameWidgetInputHandler> interface_request);

  // Notifies the renderer whether hiding/showing the browser controls is
  // enabled, what the current state should be, and whether or not to
  // animate to the proper state.
  UpdateBrowserControlsState(cc.mojom.BrowserControlsState constraints,
                             cc.mojom.BrowserControlsState current,
                             bool animate);
};

可见,这个生成的不止一个事件,包含了大部分用户事件了。去看看所在目录,也初步熟悉blink的目录结构了:

后面我们再详细介绍这套mojo跨进程通信框架的细节。

言归正传,我们attach到render进程,继续打断点跟踪鼠标事件。

想在渲染进程找到WidgetInputHandler类对应的消息,只需要在后面加个Impl即可,我们通过符号跳转,找到WidgetInputHandlerImpl类:

接下来,中间弯弯绕绕太多,我们直接在node打个断点,看看鼠标事件如何传递到node具体的处理逻辑中的:

事件首先被捕获并封装为一个MouseEventPointerEvent对象。然后通过EventDispatcher类和相关方法,事件被分发到目标Node。对应的HTML元素(通过HTMLElement和特化的TextControlInnerEditorElement)会处理这个事件,然后这个时间触发默认基类的处理器。

WebFrameWidget:继承自WebWidget,但是大部分函数依然是虚函数,用于专门负责处理一个WebFrame(即一个网页框架)的渲染和事件。如果要想显示一个网页,那么需要继承自WebFrameWidget并实现相关纯虚函数。

WebFrameWidgetImpl:是WebFrameWidget在blink里的一个具体实现类。它实现了接口中定义的所有方法,并提供了框架的具体行为。WebFrameWidgetImpl负责实际的绘图逻辑、输入事件处理、视图的更新和大小调整等。这个实现将抽象的行为具体化,它通过调用Blink渲染引擎的其他组件,如布局引擎、绘图系统等,来完成对Web内容的渲染和事件处理。WebFrameWidgetImpl是Web内容在Blink中被渲染的核心地方,它直接与底层的渲染流水线交互。

讲到这里,也要引出一个重量级的基类:Node:

Node 类是一个非常重要的基类,它表示文档中的一个节点。Node 类扮演了核心角色,以下是对 Node 类及其作用的更详细介绍:

  1. 层次结构:
    Node 类位于 DOM(文档对象模型)层次结构中的基础位置。在 DOM 中,所有的元素、文本内容和属性都被视为节点。因此,Node 类提供了一系列的基础方法和属性,用于管理节点之间的关系(例如父子关系和兄弟关系)、节点的遍历以及节点的基本操作(比如插入、替换、删除)。

  2. 事件模型:
    Node 类还是事件模型的一部分。在 Blink 中,事件通常会在节点之间传播,遵循捕获阶段、目标阶段和冒泡阶段。Node 类提供了事件处理的相关方法,比如绑定事件监听器、分发事件等。当事件发生时,比如用户的点击或键盘操作,它会被分发到正确的 Node 对象,并且通过事件监听器进行相应的处理。

  3. 渲染:
    虽然 Node 类本身并不直接处理渲染,但它的派生类,如 Element 和特化后的 HTMLElement,会存储与渲染相关的属性(例如样式信息)。这些类将 Node 的基础功能扩展到了渲染管线中,这样渲染引擎就可以使用这些信息来呈现视觉元素。

  4. 类型多样性:
    DOM 中有不同类型的节点,包括但不限于元素节点(Element)、文本节点(Text)、注释节点(Comment)和文档节点(Document)。Node 类是这些具体节点类型的基类,通过继承和多态,不同类型的节点可以拥有特化的行为,并且仍然能够通过 Node 类的接口进行通用处理。

  5. API 和脚本接口:
    Node 类还提供了一系列的 API,供 JavaScript 脚本访问和操纵节点。开发者可以通过这些 API 查询节点信息、修改节点结构、动态添加或移除节点等。这为开发者提供了强大的能力来改变页面内容和行为。

总的来说,Node 类是 Blink 和 Web 开发者用来操作和理解 Web 页面结构的基础,它为构建、遍历和交互提供了基本的框架。通过 Node 及其派生类,Blink 渲染引擎能够将结构化的 HTML 文档转化为用户可以看到和交互的网页。

未完待续 ....

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1798935.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

elementUI - 折叠以及多选的组件

//子组件 <template><!-- 左侧第二个 --><div class"left-second-more"><div class"layer-list-wrapper1"><el-collapse v-model"activeNames" change"handleChange"><el-collapse-item v-for"…

企业必备技能-打造全屏轮播图的终极指南

标题&#xff1a;“视觉盛宴&#xff1a;打造全屏轮播图的终极指南” 引言 在网页设计中&#xff0c;轮播图是一种常见的视觉元素&#xff0c;它能够吸引访客的注意力并展示重要内容。本文档将指导你如何使用HTML和CSS快速创建一个全屏轮播图&#xff0c;使您的网站更加生动和…

react-学习基础偏

1.新建文件夹 2.vscode引入这个文件夹 3.打开vscode终端 执行命令 npx create-react-app react-basic 创建基本项目&#xff08;react-basic项目文件夹名&#xff09; 4.进入到这个文件夹 可用的一些命令 这就算启动成功 5. 这是项目的核心包 渲染流程

免费实现网站HTTPS访问

HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是一种基于SSL协议的HTTP安全协议&#xff0c;旨在为客户端&#xff08;浏览器&#xff09;与服务器之间的通信提供加密通道&#xff0c;确保数据在传输过程中的保密性、完整性和身份验证。与传统的HTTP相比&a…

​​​​​​ 基于Nmap的异步无状态端口扫描技术

​​​​​​ 基于Nmap的异步无状态端口扫描技术 传统的端口扫描&#xff0c;主要是依靠TCP三次握手去连接&#xff0c;而建立连接的各个过程都存在连接状态&#xff0c;这些状态由操作系统在底层实现存储&#xff0c;可利用这些状态对应用层的数据进行处理。但是&#xff0c;…

2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

文章目录 1 Handles 类1.1 Scene 响应函数1.2 自定义窗口中监听 Scene1.3 Handles 常用 API2.2.1 颜色控制2.2.2 文本2.2.3 线段2.2.4 虚线2.2.5 圆弧2.2.6 圆2.2.7 立方体2.2.8 几何体2.2.9 移动、旋转、缩放2.2.10 自由移动 / 旋转 2 Scene 窗口中显示 GUI3 HandleUtility4 G…

AI产品经理岗位需求量大吗?好找工作吗?

前言 在当今这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已不再仅仅是一个遥远的概念&#xff0c;而是深深嵌入到我们生活的方方面面&#xff0c;从日常的语音助手到复杂的自动驾驶系统&#xff0c;AI的触角无处不在。随着AI技术的广泛应用和持续进…

react native中内容占位效果

react native中内容占位效果 效果实例图实例代码skeleton.jsx 效果实例图 实例代码skeleton.jsx import React, { useEffect, useRef } from "react"; import { Animated, StyleSheet, View } from "react-native"; import { pxToPd } from "../../.…

“开源与闭源:AI大模型发展的未来之路“

文章目录 每日一句正能量前言数据隐私开源大模型与数据隐私闭源大模型与数据隐私数据隐私保护的共同考虑结论 商业应用开源大模型的商业应用优势&#xff1a;开源大模型的商业应用劣势&#xff1a;闭源大模型的商业应用优势&#xff1a;闭源大模型的商业应用劣势&#xff1a;商…

vue3+ts 拖拽容器边缘,改变容器宽度和高度

例如&#xff1a;我们的代码编辑器 终端与代码区&#xff0c;可以纵向拖拽&#xff0c;改变两个容器高度 目录与代码区可以横向拖拽&#xff0c;改变两个容器宽度 本文使用vue3tstailwindcss&#xff0c;把横向纵向整合在一起写了&#xff0c;也可以分开使用 utils目录下新建…

【AIoT-Robot】3d hand pose

手语是聋哑人士的主要沟通工具,它是利用手部和身体的动作来传达意义。虽然手语帮助它的使用者之间互相沟通,但聋哑人士与一般人的沟通却十分困难,这个沟通障碍是源于大部分人不懂得手语。 1. 手势&&手语 手势:手的姿势 ,通常称作手势。它指的是人在运用手臂时,所…

基因分析平台开发1 - Layui WebUI组件库快速地构建网页界面

介绍一个Web UI库&#xff0c;可快速实现基因分析平台前端部分的开发&#xff0c;借助帮助文档&#xff0c;快速实现自己想要效果。 1. Layui 简介 Layui 是一套免费的开源 Web UI 组件库&#xff0c;可用于更简单快速地构建网页界面&#xff0c;全部主流 Web 浏览器&#xf…

【Java】解决Java报错:ClassCastException

文章目录 引言1. 错误详解2. 常见的出错场景2.1 错误的类型转换2.2 泛型集合中的类型转换2.3 自定义类和接口转换 3. 解决方案3.1 使用 instanceof 检查类型3.2 使用泛型3.3 避免不必要的类型转换 4. 预防措施4.1 使用泛型和注解4.2 编写防御性代码4.3 使用注解和检查工具 5. 示…

这才是计科之 Onix XV6 源码分析(1、XV6-x86的启动)

这才是计科之 Onix & XV6 源码分析&#xff08;1、XV6-x86的启动&#xff09; 前言 Onix是一款相对于XV6来说功能更为健全的单核OS&#xff0c;由于功能更加完善&#xff0c;Onix也更加复杂。代码阅读起来会比较绕。 XV6是一款简单易读的多核操作系统&#xff0c;但其功…

openh264 降噪功能源码分析

文件位置 ● openh264/codec/processing/denoise/denoise.cpp ● openh264/codec/processing/denoise/denoise_filter.cpp 代码流程 说明&#xff1a;从代码流程可以看到&#xff0c;实现降噪的核心功能主要就是BilateralDenoiseLuma、WaverageDenoiseChroma两个函数。 原理…

[word] word大括号怎么打两行 #其他#其他#微信

word大括号怎么打两行 Word给用户提供了用于创建专业而优雅的文档工具&#xff0c;帮助用户节省时间&#xff0c;并得到优雅美观的结果。 一直以来&#xff0c;Microsoft Office Word 都是最流行的文字处理程序。 作为 Office 套件的核心程序&#xff0c; Word 提供了许多易…

ChatGPT-4o提示词的九大酷炫用法,你知道几个?

ChatGPT-4o提示词的九大酷炫用法&#xff0c;你知道几个&#xff1f;&#x1f680; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典…

android antirollback verno 获取方法

ReadRollbackIndex.exe 获取 调查avbVBMeta结构体 typedef struct AvbVBMetaImageHeader { /* 0: Four bytes equal to "AVB0" (AVB_MAGIC). */ uint8_t magic[AVB_MAGIC_LEN]; /* 4: The major version of libavb required for this header. */ uint32_t…

rtl8723DU移植 android4.4 4418 (第二部分蓝牙部分)

使用的代码&#xff1a; HMI &#xff08;8723bu&#xff09;源码 567_RTL8723DU_WiFi_linux_v5.6.5.3_35502_COEX20181130-2e2e.20191025.zip 由于之前写的所有笔记没有保存&#xff0c;这里只能是部分。 0、 前置知识 1 、kernel 的移植 2、hardwire的移植 将 驱动中的 h…