我有这个功能在btnDelete图像的鼠标拖动上旋转一个组
function addRotation(group, groupMir, x, y, name) {
var image = group.get('.image')[0];
var imageMir = groupMir.get('.image')[0];
var img = new Image();
img.src = 'web/img/rotation.png';
var poly = group.get('.polygone')[0];
var Rotate = new Kinetic.Image({
x: x,
y: y,
image: img,
name: name,
visible: false,
width:24,
height:24,
offsetX: 12,
offsetY: 12,
draggable: true,
dragOnTop: false
});
if(poly) x=stage.getWidth()-x;
var RotateMir = new Kinetic.Image({
x: x,
y: y,
image: img,
name: name,
visible: false,
width:24,
height:24,
offsetX: 12,
offsetY: 12,
draggable: true,
dragOnTop: false
});
Rotate.on('dragmove', function() {
console.log('group x: '+group.getX());
var pos = stage.getMousePosition();
opp = Math.abs(group.getY() - pos.y);
adj = Math.abs(group.getX() - pos.x);
angle = Math.atan(opp / adj)* (180/Math.PI);
if(pos.x > group.getX() && pos.y < group.getY()){
group.setRotationDeg(90-angle-45);
groupMir.setRotationDeg(90-angle-45);
}else if(pos.x > group.getX() && pos.y > group.getY()){
group.setRotationDeg(90+angle-45);
groupMir.setRotationDeg(90+angle-45);
}else if(pos.x < group.getX() && pos.y > group.getY()){
group.setRotationDeg(270-angle-45);
groupMir.setRotationDeg(270-angle-45);
}else if(pos.x < group.getX() && pos.y < group.getY()){
group.setRotationDeg(270+angle-45);
groupMir.setRotationDeg(270+angle-45);
}
if(image){
this.setX(image.getWidth());this.setY(0);}else if(poly) {this.setX(polygonCorrd[2]);this.setY(polygonCorrd[3]);}
console.log('group après x: '+group.getX());
layer.draw();
});
RotateMir.on('dragmove', function() {
var pos = stage.getMousePosition();
opp = Math.abs(groupMir.getY() - pos.y);
adj = Math.abs(groupMir.getX() - pos.x);
angle = Math.atan(opp / adj)* (180/Math.PI);
if(pos.x > groupMir.getX() && pos.y < groupMir.getY()){
group.setRotationDeg(90-angle-45);
groupMir.setRotationDeg(90-angle-45);
}else if(pos.x > groupMir.getX() && pos.y > groupMir.getY()){
group.setRotationDeg(90+angle-45);
groupMir.setRotationDeg(90+angle-45);
}else if(pos.x < groupMir.getX() && pos.y > groupMir.getY()){
group.setRotationDeg(270-angle-45);
groupMir.setRotationDeg(270-angle-45);
}else if(pos.x < groupMir.getX() && pos.y < groupMir.getY()){
group.setRotationDeg(270+angle-45);
groupMir.setRotationDeg(270+angle-45);
}
this.setX(imageMir.getWidth());
this.setY(0);
layer.draw();
});
我有两个多边形
poly = new Kinetic.Polygon({
x:0,
y:0,
points: [0,0],
fill: Color1,
stroke: 'black',
strokeWidth: 2,
closed: true,
draggable: false,
name: 'polygone',
id:'polygone'
});
//layer.add(poly);
poly2 = new Kinetic.Polygon({
x:0 ,
y:0,
points: [0,0],
fill: Color1,
stroke: 'black',
strokeWidth: 2,
closed: true,
draggable: false,
name: 'polygone',
id:'polygoneMir'
});
polyGroup = new Kinetic.Group({
x: mouse.x,
y: mouse.y,
offsetX: 30,
offsetY: 30,
draggable: true
});
polyGroupMir = new Kinetic.Group({
x: stage.getWidth()-mouse.x,
y: mouse.y,
offsetX: 30,
offsetY: 30,
draggable:true
});
最后我调用addRotation函数
addRotation(polyGroup, polyGroupMir,polygonCorrd[2] ,polygonCorrd[3] , 'btnRotate');
polygonCorrd [2]是多边形中第二个点的坐标 polygonCorrd [3]是多边形
中第三个点的坐标旋转适用于图像,矩形而不适用于多边形或线条, 你有什么建议