1

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

谢谢

4

1 回答 1

0

您可以通过存储构建位图的图像来解决此问题，然后在需要粘贴时重新添加它们。您还需要像这样覆盖 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);
    }
)
于 2012-03-29T19:14:04.027 回答