feat: 渲染元素的 cursor 属性

src/core/render/item.ts

@@ -177,6 +177,12 @@ export interface IRenderTreeRoot {
      * 获取渲染至的目标画布，即显示在画面上的画布
      */
     getCanvas(): HTMLCanvasElement;
+
+    /**
+     * 当鼠标覆盖在某个元素上时执行
+     * @param element 鼠标覆盖的元素
+     */
+    hoverElement(element: RenderItem): void;
 }
 
 export interface ERenderItemEvent extends ERenderItemActionEvent {
@@ -260,6 +266,9 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /** 不透明度 */
     alpha: number = 1;
 
+    /** 鼠标覆盖在此元素上时的光标样式 */
+    cursor: string = 'auto';
+
     get x() {
         return this._transform.x;
     }
@@ -788,6 +797,9 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     ): boolean {
         switch (type) {
             case ActionType.Move: {
+                if (inElement) {
+                    this._root?.hoverElement(this);
+                }
                 if (this.hovered && !inElement) {
                     this.hovered = false;
                     this.emit('leaveCapture', event);
@@ -1063,6 +1075,11 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 this.setAnchor(nextValue[0] as number, nextValue[1] as number);
                 return;
             }
+            case 'cursor': {
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.cursor = nextValue;
+                return;
+            }
         }
         const ev = this.parseEvent(key);
         if (ev) {

src/core/render/render.ts

@@ -449,6 +449,10 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
         return this.target.canvas;
     }
 
+    hoverElement(element: RenderItem): void {
+        this.target.canvas.style.cursor = element.cursor;
+    }
+
     destroy() {
         super.destroy();
         MotaRenderer.list.delete(this.id);