0

我一直在玩 KineticJS，但遇到了一个有趣的问题。我不确定如何解决它。这是我的代码。

HTML

<body>
  <div id="container"></div>
  <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
</body>

JavaScript

// Kinetic Example
var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 400
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);

// My doCircle function
function doCircle(ddata) {
    var layer = new Kinetic.Layer();
    var circle = new Kinetic.Circle({
        x: ddata[1],
        y: ddata[2],
        radius: ddata[3],
        fill: '' + ddata[4] + '',
        stroke: '' + ddata[5] + '',
        strokeWidth: ddata[6],
        draggable: true
    });
    layer.add(circle);
    stage.add(layer);
}
// Data example (will be from user input)
var data = "circle 50 50 20 green blue 5";
// Make data an array
var arrData = data.split(" ");
// Get draw type
switch (arrData[0]) {
    case "circle":
        doCircle(arrData);
        break;
}

我还为此制作了一个JS Fiddle。您会注意到静态制作的大红色圆圈是可拖动的。单击时我使用“数据”构建的较小的绿色圆圈会消失或在画布上设置为 0,0。我假设这可能是圆的 x,y 上的数组中的data 1和 data[2] 的数据类型问题？但是，如果是这种情况，为什么元素首先会正确呈现，并且只有在尝试拖动它时才会中断？

感谢您的帮助和解决方案。

4

1 回答 1

1

使用 parseInt() 将传入的字符串数据转换为数字数据，然后你就很好了......

var circle = new Kinetic.Circle({
    x: parseInt(ddata[1]),
    y: parseInt(ddata[2]),
    radius: parseInt(ddata[3]),
    fill: '' + ddata[4] + '',
    stroke: '' + ddata[5] + '',
    strokeWidth: parseInt(ddata[6]),
    draggable: true
});

另外，您是否打算每次在 doCircle 中创建一个新层？

于 2013-10-30T16:40:52.567 回答