Question

我没有运气使下面的代码在最新版本的KineticJS 5.0中运行。我搜索了更改日志，但找不到问题。移动红色矩形可控制绿色方块的旋转。旋转红色方块可控制红色矩形的位置。如何更新dragboundfunc代码以使其在5.0中工作？下面是旧代码，这是我的jsfiddle，它使用旧版本的Kineticjs：

var rect_red = new Kinetic.Rect({
x: 150,
y: 5,
width: 80,
height: 35,
fill: "red",
stroke: "black",
strokeWidth: 2,  
dragOnTop: true,
draggable: true,
    dragBoundFunc: function(pos) {
       var pos = stage.getMousePosition();
       var newX = pos.x;
       var oldY = rect.getRotationDeg();
       var newY = pos.y;
    var theta2 = Math.atan2(newY, newX);
    var degree_cw =  (theta2 / (Math.PI / 180) *.1);
    var degree_ccw =  (theta2 / (Math.PI / 180) *-.1);

        if(newY > oldY) 
        {rect_green.rotateDeg(degree_cw); layer.draw(); }

      else if(newY < oldY) {
        rect_green.rotateDeg(degree_ccw)* -1; layer.draw();
      }
      return {
        x: 150,
        y: newY,
                }
    }

});
layer.add (rect_red);


var rect_green = new Kinetic.Rect({
x: 150,
y: 150,
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50, 50],
dragOnTop: true,
draggable: true,
dragBoundFunc: function (pos) {
    var xd = 150 - pos.x ;
    var yd = 150 - pos.y ;
    var theta = Math.atan2(yd, xd);
    var degree = theta / (Math.PI / 180) - 45;
    var degree2 = theta  / (Math.PI / 540);
    this.setRotationDeg(degree);
    if (degree < 0){             
    rect_red.setPosition(150,0);}
    else {rect_red.setPosition(150,degree2); layer.draw();}
    //var deg = theta * 180 / Math.PI;

    return {
        x: this.getAbsolutePosition().x,
        y: this.getAbsolutePosition().y
    }
   }
});

Answer 1

getMousePosition现在是getPointerPosition。 offset应定义为对象{x：x，y：y}。 http://jsfiddle.net/lavrton/eqK2y/1/

为什么我的dragboundFunc代码不再适用于Kineticjs 5.0（仅供参考我是编码新手）

1 个答案: