0

kinetic.js を理解するのにいくつか問題がありました (ドキュメンテーションは初心者にとってひどいものです...) 私の下手な英語で説明できることを願っています。

問題 1: キャンバスを #reset するたびに、実際にはリセットされません。実際のキャンバス上に別の背景画像をプッシュするようなもので、クリックすると元の画像に戻ります...

function clearCanvas() {
context.clearRect(0, 0, 1000, 1000);   //whole canvas
context.drawImage(buehneObj,0,0);      //redraw the main background image
}

そしてそれを呼び出す：

reset = document.getElementById('reset');
document.getElementById('reset').onclick =function(){clearCanvas();
}

問題 2: 画像をスケーリングするために作成したスライダーがまったく機能していませんが、問題は見られません... ...変数はグローバルであり、アラートをテストすると、値が存在することがわかります...

標準の jquery スライダー:

$('#scaleslider').slider({
        animate: "fast",
        step: 0.1,
        value: 1,
        min: 0.1,
        max: 1,
        slide: function(event,ui){groesse = ui.value} //global variable
});

非表示（表示：なし）にし、「ブロック」をクリックすると

var scaleslider = document.getElementById('scaleslider').style;
document.getElementById('resize').onclick =function(){ scaleslider.display ="block";}

キネティック パーツは次のようになります (dragMotiv は最初の開始イメージです) "groesse" は、x および y スライダー値の変数です (同じものを使用できるため、正しくスケーリングされます)。

var dragMotiv = new Kinetic.Image({
      image: imageObj,
      x: 250,
      y: 300,
      width: 330,
      height: 263,
      rotationDeg: 0,
      scale: { x:groesse, y:groesse },
      draggable: true,
      dragBoundFunc: function(pos) {

        var newY = pos.y < 290 ? 290 : pos.y > 305 ? 305 : pos.y;
        var newX = pos.x < 250 ? 250 : pos.x > 390 ? 390 : pos.x;
        return {
          x: newX,
          y: newY
        };
      }
    });

問題 3: 保存がまったくできない。

サーバーにアップロードして、皆さんに見てもらいました。私が見ない小さなものが1つあることを知っています（そうであることを願っています）。

http://manufaktur13.de/playground/canvas_kinetic.html

4

1 に答える 1

0

キャンバスをクリアするのではなく、溺れたものを記録してそれらのアイテムを削除し、レイヤーを再描画する必要があると思います。

于 2013-10-08T09:44:13.803 に答える