javascript - 如何获得被点击的对象的副本

大家好，我目前正在使用html5和easylJS。我上面有一个画布和一个图像。我想要的是，当我单击图像时创建了它的副本，而当我单击画布上的其他位置时我的图像复制到那里，以便在我的画布上留下两个图像。
我想问问是否有一种方法可以知道我是单击图像还是画布上的图像，以及如何在编写代码后复制图像，但它会删除原始图像并放置它到那里，在画布上只留下一个图像

谢谢

最佳答案

您可以通过以下方式解决此问题：存储生成位图的图像，然后在需要粘贴时重新添加它们。另外，您还需要像这样重写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);
    }
)

关于javascript - 如何获得被点击的对象的副本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9922036/