как получить копию объекта, по которому щелкают - PullRequest
Новая
       14

как получить копию объекта, по которому щелкают

1 голос
/ 29 марта 2012

Привет всем, с кем я сейчас работаю с html5 и easelJS. У меня есть холст и изображения на нем. Я хочу, чтобы при нажатии на изображение создавалась его копия и когда я нажимал в другом месте холст мои изображения копируются туда, поэтому на холсте остаются два изображения. Я хочу спросить, есть ли способ узнать, нажимаю ли я на изображение или на холст. И как сделать копию своего изображения, поскольку я написал некоторый код, но он удаляет мое оригинальное изображение и место чтобы оставить только одно изображение на холсте

спасибо

1 Ответ

0 голосов
/ 29 марта 2012

Вы можете решить эту проблему, сохранив изображение, из которого построены ваши растровые изображения, а затем повторно добавив их, когда вам нужно вставить. Также вам нужно переопределить 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);
    }
)
...