将形状转换为组

Question

我在我的舞台上有不同的形状，我想在选择时让它们调整大小。

我认为“将”形状转换成一个组并向它添加改性剂。当取消选择形状时，我可以删除改性剂，然后从组中删除形状并将其添加回其旧父母。

我尝试了，它并没有真正的工作，因为坐标原点的形状更改，如果它有拖网码，那就更糟了。所以它似乎有很多工作，感觉错了。我以为必须有更好的方法，这可能很广泛。

所以我的问题是，在飞行中将改性剂添加到现有形状的最佳方法是什么，并在未选择形状时删除它们？

Answer 1

商定，调整“锚”的大小在视觉上没有吸引力，复杂于代码

将单独的调整器添加到图像中是视觉上的尴尬

（o / s windows不添加Clunky寻找调整器以启用调整大小）。

添加单独的redizer也会很快复杂。

隐喻，您必须管理关于您的太阳形状的单独的Resizer-Planets。

当形状受磁杆限制时管理这些卫星是复杂的。

在旋转形状时管理那些卫星由于KineticJS对偏移来定义旋转点而感到惊讶。

替代方案：使用形状本身的边界框来管理调整大小。

• 聆听舞台上的鼠标事件。
• 当用户在形状的边界上旋转时，开始调整大小。
• 作为用户拖动，基于鼠标从拖侧侧侧拖动的距离调整形状大小。

福利：

• 没有锚点需要
• 使用相同的调整大小方法，用户熟悉调整O / L窗口的大小时
• 只涉及形状本身，因此不需要复杂的“卫星锚”管理。

这是一个例子： http://jsfiddle.net/m1erickson/t4e9y/

定义形状（此示例使用图像）。

kImage = new Kinetic.Image({
    image:img,
    x:10,
    y:10,
    width:img.width,
    height:img.height,
});
layer.add(kImage);
layer.draw();

.

将边界区域保存在其当前大小的形状

聆听舞台上的mousedown事件。

在形状边界框边框内的用户鼠标时保存起始拖动位置

$(stage.getContent()).on('mousedown', function (event) {
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var ipos=kImage.position();
    var isize=kImage.getSize();
    var right=ipos.x+isize.width;
    if(mouseX>right-10 && mouseX<right+10){
        startRight=mouseX;
        startWidth=isize.width;
        startHeight=isize.height;
    }
});

.

聆听舞台上的mousemove事件。

根据从起始拖动位置拖动的距离缩放形状。

$(stage.getContent()).on('mousemove', function (event) {
    if(startRight>=0){
        var pos=stage.getPointerPosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-startRight;
        var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
        kImage.width(startWidth*scaleFactor);
        kImage.height(startHeight*scaleFactor);
        layer.draw();
    }
});

.

侦听舞台上的鼠标鼠标事件。

在用户释放鼠标

时结束拖拉大小

$(stage.getContent()).on('mouseup', function (event) {
    startRight=-1;
});

.

从这里开始：

此示例从右侧边框激活RESIZER。您可以类似地启用其他边界。

您可以通过在Mousedown中更改目标来更改调整大小的形状。

对于非常不规则的形状，当用户移动到该边界框中时，可以显示形状的边界框。然后让用户使用边界框边框调整大小。

当鼠标位于拖动边框时，您可以显示所有类型的形状作为突出显示的边界框。边界框成为用户的有用视觉。