Question

我必须设置一个限制克隆项目的最大克隆数。那些物品是可以拖拽的。该示例将描述该问题：

我将最大数量设置为2，
我将两个项目拖到放置目标
然后当我在画布上拖动其中一个时，出现显示我达到最大数量的警报，并删除该项目（正如我编码的那样）！

代码：

cloneImg.on('dragend', function(){ 
    if (img.maxClones>0)
    {
        img.maxClones--;
        var point = cloneImg.getPosition();
        rightLayer.draw(this);
        stage.draw();
    }        
    else {
        alert("Equipment Unavailable: max number is "+max+", and has already been reached.");
        revert(this,this.startX,this.startY);
        rightLayer.draw();
        stage.draw();
    }
}

我应该在事件发生后添加一两行，但似乎无法对其进行本地化。我该怎么做才能防止这种情况发生？

Answer 1

也许修改你的逻辑，从原始的一堆克隆开始：

演示：http://jsfiddle.net/m1erickson/3XSAz/

在启动屏幕上：

创建原始房屋（不可拖动）。
克隆原始房屋的2份副本，并将它们直接放在原件的顶部。克隆将是可拖动的：layer.add（original.clone（{draggable：true}））;

克隆dragend

如果克隆在dropzone中正确删除，请将克隆留在那里。
如果克隆落在dropzone之外，请将其直接放回原始文件的顶部。

如果你想获得幻想，你可以制作不可拖动的原件，不透明度为50％，这样用户就可以直观地看到他们何时使用了所有可用的元素。

示例代码：

var sw=stage.width();
var sh=stage.height();

layer.add(new Kinetic.Rect({x:sw/2,y:0,width:sw/2,height:sh,fill:"lightblue"}));

var original = new Kinetic.Circle({
    x:100,
    y:100,
    radius: 30,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    opacity:0.50,
});
original.maxClones=2;
layer.add(original);
layer.draw();
makeClones(original);

function makeClones(base){
    for(var i=0;i<original.maxClones;i++){
        var clone=base.clone({draggable:true,opacity:1.00});
        clone.startingX=clone.x();
        clone.startingY=clone.y();
        clone.on("dragend",function(){
            if(this.x()>sw/2){return;}
            this.x(this.startingX);
            this.y(this.startingY);
            layer.draw();
        });
        layer.add(clone);
    }
    layer.draw();
}

KineticJS：克隆图像，具有最大克隆数，在画布上拖动时消失

1 个答案: