я борюсь с проблемой в течение нескольких дней
если я перетащу круг рядом с наконечником стрелки и изменю размер всей стрелки, вращение не будет происходить вокруг правого центра, когда
я нажимаю кнопку поворота
Есть предположения?
вращение всегда должно быть сосредоточено вокруг зеленой ручки
ОБНОВЛЕНИЕ: 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);
