Question

大家好，我目前正在使用html5和画架.JI.I上有画布和图像。我想要的是当我点击图像时会创建它的副本，当我点击其他地方时画布我的图像被复制到那里，所以在我的画布上留下两个图像。我想问一下，有什么方法我可以知道我是在点击图像还是在画布上。如何制作我的图像副本，因为我已经写了一些代码，但它删除了我的原始图像和地方它只能在画布上留下一个图像

谢谢

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);
    }
)

如何获取被点击的对象的副本

1 个答案: