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 上の配列からのデータ1とデータ [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 に答える