1

KineticJSを使用してWebアプリを構築しようとしていますが、基本的には、ロード時に実行され、キャンバス（KineticJSのステージ）に画像を追加する関数があります。ただし、関数が実行されるたびに、既存の画像の下に画像が再度追加されます。必要に応じて、現在ステージ上にある画像を置き換えます。関数が読み込まれるたびに新しい画像オブジェクトを作成することと関係があることはわかっていますが、その位置が（下で）異なる理由については混乱しています。ここで同じイベントをシミュレートしました：http：//jsfiddle.net/UCvbe/-ボタンを数回クリックすると、画像が下に複製されます。最終関数は、ユーザーがノッカーを選択したときに実行されるため、最終関数は、シルバーノッカーなどを描画することを認識できるように、「シルバー」などのパラメーターを受け入れる必要があります。

どんな助けでも大歓迎です！

4

1 に答える 1

1

コードは次のようになります。

$('#testBtn').click(function() {

var stageKnocker = new Kinetic.Stage({
    container: "canvas-overlay",
    width: 402,
    height: 470
});
var layerKnocker = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function(){
    var image = new Kinetic.Image({
    x: 193,
    y: 110,
    image: imageObj,
    width: 25,
    height: 50,
    draggable: true
     });
     layerKnocker.add(image);
     stageKnocker.add(layerKnocker);
 };
 imageObj.src = "http://shop.windowrepairshop.co.uk/WebRoot/Store3/Shops/es115683_shop/49E6/ECF2/0C60/3750/10B1/50ED/8970/710D/V6GP_0020_gold_0020_plate_0020_vic_0020_urn_0020_LArge.jpg";

})

最初の問題は、ユーザーがボタンをクリックするたびに新しいステージを作成していることです。そうしないでください。必要なのは1つのステージだけです。

また、ユーザーがボタンをクリックするたびに新しいレイヤーを作成します。そうしないでください。必要なのは単一のレイヤーだけです。

最後に、ユーザーがボタンをクリックしてレイヤーに追加するたびに、新しいKinetic.Imageを作成します。それはいいです！それを続けてください。ただし、古いKinetic.Imageも削除する必要があります。そうしないと、画像を置き換えずに、画像を追加し続けることになります。

したがって、Kinetic.Imageをレイヤーに追加する前にlayerKnocker.removeChildren()、既存の画像をレイヤーから削除する必要があります。これにより、レイヤー内のすべてが削除されます。

完了すると、単一のステージ、単一のレイヤー、および任意の時点で単一のイメージが作成されます。

于 2012-07-19T08:43:01.210 に答える