我为一个问题苦苦挣扎了好几天
如果我拖动箭头附近的圆圈并调整整个箭头的大小,旋转将不会围绕右中心旋转
我按下旋转按钮
有什么想法吗?
旋转应该始终以绿色旋钮为中心
更新:http://jsfiddle.net/d9nAq/2/
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var anchor1 = new Kinetic.Circle({
x: 50,
y: 50,
radius: 10,
fill: "blue",
draggable: true
});
anchor1.on("dragmove", function () {
connector.repoint();
});
layer.add(anchor1);
var anchor2 = new Kinetic.Circle({
x: 200,
y: 75,
radius: 10,
fill: "green",
draggable: true
});
anchor2.on("dragmove", function () {
connector.repoint();
});
layer.add(anchor2);
var connector = new Kinetic.Polygon({
points: [],
strokeWidth: 1,
fill: "red",
});
connector.arrowHeight = 12;
connector.arrowWidth = 16;
connector.anchorRadius = 5;
connector.repoint = function () {
var x1 = anchor1.getX();
var y1 = anchor1.getY();
var r1 = anchor2.getRadius();
var r2 = anchor2.getRadius();
var dx = anchor2.getX() - x1;
var dy = anchor2.getY() - y1;
var lineLength = Math.sqrt(dx * dx + dy * dy) - r2 - this.arrowWidth;
var angle = Math.atan2(dy, dx);
var points = [];
points.push(r1, 0);
points.push(lineLength, 0);
points.push(lineLength, -this.arrowHeight / 2);
points.push(lineLength + this.arrowWidth, 0);
points.push(lineLength, this.arrowHeight / 2);
points.push(lineLength, 0);
points.push(r1, 0);
this.setPoints(points);
this.setPosition(x1, y1);
this.setRotation(angle);
layer.draw();
}
layer.add(connector);
connector.repoint();
document.getElementById('P10005_ROTATE_RIGHT').addEventListener('click', function() {
var arrow = layer;
var deg = arrow.getRotationDeg();
arrow.setRotationDeg(deg+15);
// arrow.setPosition([arrowx-xoff,arrowy-yoff]);
console.log(arrow.getPosition());
console.log(arrow.getOffset());
layer.draw();
}, false);
最佳答案
Kinetic 中的所有对象都围绕其偏移点旋转。
因此,如果您希望一切都围绕 anchor2 旋转,那么所有“卫星”对象的偏移量都必须指向 anchor2 的中心点。
如果您移动 anchor2 或任何卫星,则必须重置每个卫星偏移以指向 anchor2 的中心点。
问题:
Kinetic 对象的位置自动链接到它的偏移点。如果您更改偏移点,对象将在舞台上以视觉方式自动重新定位。
要将任何对象的偏移量指向 anchor2,您需要知道该对象在舞台上的位置。不幸的是,Kinetic 的 anyObject.getAbsolutePosition 不返回该对象的偏移+变换位置。
如果无法知道对象被拖动+旋转的位置,那么 Kinetic 框架本身就没有解决方案。
这就是为什么您为了在 Kinetic 中寻找解决方案而头疼了好几天......没有一个 :-(
理论解
您可以使用三 Angular 函数计算每颗卫星相对于 anchor2 的旋转位置。有了真正的旋转位置,您就可以设置卫星的偏移量+位置并使您的项目正常运行。
关于javascript - 旋转和偏移动力学 js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21094208/