ココスクリエイターマウスブラシ | 線を描く

cocos Creator のバージョンは少なくともバージョン 2.3.2 以降に適合している必要があります
ケース:
画像の説明を追加してください
簡単なアイデア: MOUSE_MOVE イベントと Graphics コンポーネントで
フロントエンドを実現できますが、canvas と Mousemove イベントを通じても実現できます、原理は同じです

具体的な手順は次のとおりです。
ここに画像の説明を挿入
1. ノード Node を追加します
。 2. Node ノードにバインドします组件Graphics
。 3. 以下のスクリプトdrawcontroll.ts を追加します。
4. Node ノードのアンカーポイントと位置に注意してください (この方法が必要ない場合は、一番下の解決策がわかります）
画像の説明を追加してください

drawcontroll.tsすべてのコード

import {
    
     _decorator, Component, Color, Node, Graphics, Vec3, UITransform } from 'cc';
const {
    
     ccclass, property } = _decorator;

@ccclass('drawcontroll')
export class drawcontroll extends Component {
    
    
    graphics=null;
    isDrawing = false;
    array = [];

    start() {
    
    
        this.graphics = this.getComponent(Graphics);
        this.graphics.lineWidth = 5;
        this.graphics.strokeColor = Color.RED;
        this.node.on(Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
        this.node.on(Node.EventType.MOUSE_MOVE, this.onMouseMove, this);
        this.node.on(Node.EventType.MOUSE_UP, this.onMouseUp, this);
    }
        onMouseDown (event) {
    
    
            this.isDrawing = true;
            this.graphics.moveTo(event.getLocation().x,event.getLocation().y);
        }
        onMouseMove (event) {
    
    
            if (this.isDrawing) {
    
    
                this.graphics.lineTo(event.getLocation().x,event.getLocation().y);
                this.graphics.stroke();
            }
        }
        onMouseUp (event) {
    
    
            this.isDrawing = false;
        }
}

注:
マウスで描いた線がマウスの軌跡から大きく外れている場合は、次の 2 つの方法があります。

ブラウザが拡大または縮小しているかどうか ----- 100% に調整
アンカーと位置の設定の問題

作成したNodeスクリプトのアンカーポイントと位置は変更されません（アンカーポイント0.5、0.5、位置0、0）

次に、drawcontroll.ts上記のコードを次のように置き換えるだけです

		onMouseDown (event) {
    
    
            this.isDrawing = true;
            const moveToPoint = this.node.parent.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(event.getLocation().x,event.getLocation().y,0));
            this.graphics.moveTo(moveToPoint.x,moveToPoint.y);
        }
        onMouseMove (event) {
    
    
            if (this.isDrawing) {
    
    
                const lineToPoint = this.node.parent.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(event.getLocation().x,event.getLocation().y,0));
                this.graphics.lineTo(lineToPoint.x,lineToPoint.y);
                this.graphics.stroke();
            }
        }

ConvertToNodeSpaceAR メソッドについては次のように説明します。
ここに画像の説明を挿入

キーワード:
ココスクリエイターマウスブラシ | ドローライン、ココスクリエイタードローライン、ココスクリエイターブラシ、ココスクリエイタードローシェイプ、ココスクリエイタードロー

ココスクリエイター マウスブラシ | 線を描く

おすすめ

ココスクリエイターマウスブラシ | 線を描く