javascript - クリックされたオブジェクトのコピーを取得する方法

Question

こんにちは、私は現在html5とイーゼルJSで作業しています。キャンバスと画像があります。画像をクリックするとコピーが作成され、キャンバスの他の場所をクリックすると画像が作成されます。そこにコピーされるので、キャンバスに2つの画像が残ります。画像をクリックしているのか、キャンバスをクリックしているのかを知る方法はありますか？コードを書いたので画像のコピーを作成する方法はありますが、元の画像と場所が削除されますキャンバスに画像を 1 つだけ残して、その場所に移動します

ありがとう

Answer 1

これは、ビットマップの作成元の画像を保存し、貼り付ける必要があるときに再度追加することで解決できます。また、次のように Stage.prototype._handleMouseDown をオーバーライドする必要があります。

   window.Stage.prototype._handleMouseDown = function(e){
        if (this.onMouseDown) {
            this.onMouseDown(new MouseEvent("onMouseDown", this.mouseX, this.mouseY, this, e));
        }
        var target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, (this._mouseOverIntervalID ? 3 : 1));
        if (target) {
            if (target.onPress instanceof Function) {
                var evt = new MouseEvent("onPress", this.mouseX, this.mouseY, target, e);
                target.onPress(evt);
                if (evt.onMouseMove || evt.onMouseUp) { this._activeMouseEvent = evt; }
            }
            this._activeMouseTarget = target;
        } else {
            this.onPressThrough && this.onPressThrough(e);
        }
    }

次に、実装で onPressThrough を次のように定義します。

    stage.onPressThrough = function(event){
        console.log("paste");
        paste(event.x, event.y);
    }

完全な動作例を次に示します。

$(document).ready(
    function(){
        var canvas = document.createElement('canvas');

        $(canvas).attr('width', '1000');
        $(canvas).attr('height', '1000');

        $('body').append(canvas);

        var stage = window.stage = new Stage(canvas);
        canvas.stage = stage;


        function copy(target){
            window.clipboard = target;
        }

        function addImage(image, x, y){
            var bitmap = new Bitmap(image);
            bitmap.image = image;

            bitmap.onPress = function(event){
                console.log("copy")
                copy(this.image);
            }
            stage.addChild(bitmap);
            bitmap.x = x || 0;
            bitmap.y = y || 0;

        }

        function paste(x, y){
            window.clipboard && addImage(clipboard, x, y);
        }

        window.Stage.prototype._handleMouseDown = function(e){
            if (this.onMouseDown) {
                this.onMouseDown(new MouseEvent("onMouseDown", this.mouseX, this.mouseY, this, e));
            }
            var target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, (this._mouseOverIntervalID ? 3 : 1));
            if (target) {
                if (target.onPress instanceof Function) {
                    var evt = new MouseEvent("onPress", this.mouseX, this.mouseY, target, e);
                    target.onPress(evt);
                    if (evt.onMouseMove || evt.onMouseUp) { this._activeMouseEvent = evt; }
                }
                this._activeMouseTarget = target;
            } else {
                this.onPressThrough && this.onPressThrough(e);
            }
        }

        stage.onPressThrough = function(event){
            console.log("paste");
            paste(event.x, event.y);
        }

        var image = new Image();
        image.src = "assets/images/tempimage.png";
        addImage(image);

        window.tick = function(){
            stage.update();
        }

        Ticker.addListener(window);
    }
)