2

HTML Canvas について少し学んでいて、クロスブラウザー (Chrome、Firefox、Safari) のように見える動作に遭遇しましたが、特定のセットアップに固有のようです。

問題は、キャンバスで発生するイベントの相互作用に加えて、マウスでクリックアンドドラッグの動きを実行すると、不可解なことに拡張ボックスも描画されることです (デスクトップで複数のアイコンを選択した場合など)。 .

私はfabric.jsでこの動作に遭遇し、それが間違ったことだと思って長い間ホイールを回転させました (確かに、まだそうかもしれません) - しかし、kineticjs に切り替えたところ、問題はなくなりました。しかし、私はそれを他の場所で見ているので、ライブラリを切り替えることなく修正できるかどうか疑問に思っています。

私もいくつかのライブの例を持っています:

私は OSX を使用していますが、Windows ユーザーにも同じ動作が見られるかどうか知りたいです。（誰かがページを見る時間に慈善を感じている場合）

例

4

1 に答える 1

1

青色の選択ボックスは、Fabric (オブジェクトのグループ化) のデフォルトの動作であり、インタラクティブ キャンバス ( fabric.Canvas) 用です。

ただし、経由で無効にすることができますcanvas.selection = false。

選択ボックスに干渉せずに線を描く簡単な例を次に示します ( jsfiddleを参照)。

ここに画像の説明を入力

var canvas = new fabric.Canvas('c', { selection: false });

var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});
于 2013-05-26T01:14:48.553 に答える