Question

我一直在玩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。我假设这可能是一个数据类型问题，数据1和数据[2]来自圆圈x，y上的数组？但是，如果是这种情况，为什么元素首先正确呈现并且只有在尝试拖动它时才会中断？

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

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

在Kinetic.js中动态创建的HTML5 canvas元素失败，显示为draggable：true

1 个答案: