0

自分のサーバーでホストされている簡単な KineticJS の例を試してみましたが、画像の 4 つのコーナーに 4 つのハンドルを配置する際に問題が発生しました。下のスクリーンショットに示すように、ハンドル ポイントは間違った位置にあります。ただし、ハンドルはjsfiddleで正しく配置されています!

jsfiddle: http://jsfiddle.net/NPB77/

ここに画像の説明を入力

私は KineticJS に非常に慣れていないので、正しい方向に向けることができれば本当に感謝しています。ありがとう!

アップデート

jsfiddle: http://jsfiddle.net/NPB77/1/

addAnchor関数内に配置することで解決しimageObj.onload()ます。

var imageObj = new Image();
imageObj.onload = function() {
    var thing = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj
    });

    addAnchor(thingGroup, 0, 0, "topLeft");
    addAnchor(thingGroup, imageObj.width, 0, "topRight");
    addAnchor(thingGroup, imageObj.width, imageObj.height, "bottomRight");
    addAnchor(thingGroup, 0, imageObj.height, "bottomLeft");

    thingGroup.add(thing);
    stage.draw();
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

ただし、画像のサイズを変更する必要があるコーナー ハンドルをドラッグすると、次のエラーが表示されます。

Uncaught TypeError: Cannot call method 'setPosition' of undefined

ここで何がうまくいかなかったのですか？が機能しない理由がわかりgroup.get(".topLeft")ません。これは範囲の問題ですか?

4

1 に答える 1

3

関数を作成するときはthing、initStage後で参照できるように ID を指定します。
というわけでこんな感じ… 

var thing = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    id: "thingImage"
});

..次に、update関数で次のように参照できます... 

var image = group.get("#thingImage")[0];

これが実際の例です...
http://jsfiddle.net/NPB77/2/

于 2012-12-15T10:08:48.100 に答える