Question

我正在尝试用鼠标旋转文本，以便可以将其手动放置在圆圈的两侧。目前，我的代码是：

$(window).load(function(){
var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);

function add(name, width, height, rotate){
var image = new Image();
image.src = name;
image.onload = function () {

    var image1 = new Kinetic.Image({
        x: 0,
        y: 0,
        width: width,
        height: height,
        image: image,
        //draggable: true
    });
    layer.add(image1);
    layer.draw();
if(rotate===true){
image1.setOffsetX(-50);
image1.setOffsetY(-60);
    layer.draw();
}
}

}
add("sample.png", 300, 300);
//add("b.jpg", 100, 100, true);

$("#addbutton").click(function () {

  var str = $("#newtext").val();
  var res = str.split("");
  for(i=0;i<res.length;i++){
  x = 14;
  y = 117;

  var group = new Kinetic.Group ({
    x: x, y: y,
        draggable: true
  }); layer.add (group)
  var text = new Kinetic.Text ({
    x: 0, y: 0, fill: 'red', text: res[i], scale: 3
  }); group.add (text)
  text.rotateDeg(-66);

  }

group.on('dragstart', function() {

var group       = (this).getParent();
var stage       = group.getStage();

var pos     = stage.getPointerPosition();
var xd      = 150 - pos.x ;
var yd      = 150 - pos.y ;
var theta   = Math.atan2(yd, xd);
var degree  = theta / (Math.PI / 180) - 45;
text.setRotationDeg(degree);
});
  layer.draw()


});

    });

当用户在输入中键入他的名字时，它会分割每个字符并将其绘制在可移动的画布上，但需要旋转以适合圆圈。

我已经看过其他人的帖子，但没有帮助。请告诉我我错了。我也有一个小提琴。 http://jsfiddle.net/q3fog02b/7/

dynamicjs用鼠标旋转文本

0 个答案: