kineticjs - KineticJS 和对组的转换（倾斜）

Question

我很难弄清楚如何解决这个问题。

我有一个 KineticGroup，里面有一个多边形。还有一个按钮 (KineticCircle) 位于多边形的右上角，用户可以拖动该按钮来倾斜多边形。

这一切都在工作。我的问题是：

按钮与多边形倾斜！由于倾斜将图像的顶部移动到按钮应该跟随多边形，但它应该保持它的原始形式。

我试图将按钮移动到主组内的另一个组，然后删除/添加它，但它仍然倾斜。

我还尝试创建一个父组，包含多边形组和按钮组，但是按钮组会保持静止，这对我来说同样糟糕。

任何想法如何解决这个问题？有没有办法让子组对它的父组转换免疫？

先感谢您

Answer 1

如何创建一个自定义 KineticJS 形状，它是一个由属性 var 控制的倾斜的矩形。

然后你不必倾斜图层：

// skewRect properties to manipulate skew, etc.
var skewY=0;
var skewX=0;
var width=50;
var height=25;

var skewRect = new Kinetic.Shape({
  drawFunc: function(canvas) {
    var context = canvas.getContext();
    context.save();
    context.beginPath();
    context.transform(1, skewX, skewY, 1, 0, 0);
    context.fillRect(-width/2, -height/2, width, height);
    context.closePath();
    canvas.fillStroke(this);
    context.restore();
  },
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});