在kineticjs中用鼠标拖动移动一组

时间:2014-05-09 16:38:14

标签: line kineticjs polygon

我有这个功能在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]是多边形

中第三个点的坐标

旋转适用于图像,矩形而不适用于多边形或线条, 你有什么建议

0 个答案:

没有答案