Javascript dynamic.js中动态创建的HTML5画布元素失败，draggable:true

我一直在玩KineticJS，遇到了一个有趣的问题。我真的不知道如何解决它。这是我的密码

HTML

我也为此做了一些准备。您会注意到静态生成的大红色圆圈是可拖动的。单击时，我使用“数据”创建的较小的绿色圆圈会消失或在画布上设置为0,0。我假设这可能是一个数据类型问题，数据和圆x，y上的数组中的数据[2]？但是如果是这样的话，为什么元素一开始会正确渲染，而只有在尝试拖动它时才会中断

---

感谢您的帮助和解决方案

使用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内创建一个新层？

这非常有效，谢谢。至于每次创建一个新层，我还没有真正考虑过。我想我可以实例化一次层，然后添加到该层。我现在还没有想到我的用例。

// 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;
}

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
});