1

不透明度 = 0 の多くのサーセルで構成されたキャンバスがあります。次の場合に、これを 1 に変更したいと考えています。

  1. 円をクリック
  2. マウスボタンが押されたときに円の上を (カーソルで) 移動します。

Nr1は簡単です。それは canvas.on('mouse:down......) で解決されます

しかし、問題番号 2 を解決する方法がわかりません。コードの一部を次に示します。

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

canvas.on('mouse:move', function(options) {
    if (mouseDown  && options.target) {
        options.target.set('opacity', 1)
        canvas.renderAll()
}});

しかし、マウスボタンが押されたとき、option.target は常に未定義です。

Object {target: undefined, e: MouseEvent}
4

2 に答える 2

1

私は Fabric.js にあまり詳しくないので、もっと良い解決策があるかもしれませんが、私の見解は次のとおりです。

canvas.on('mouse:move',function(options){
    var pt = { x: options.e.clientX, y: options.e.clientY };
    if( circle.containsPoint(pt)  ) {
        if( !circle.mouseOver ) {
            circle.mouseOver = true;
            console.log( 'over circle, yo' );
            circle.set('opacity', 0.5);
            canvas.renderAll();
        }
    } else if( circle.mouseOver ) {
        circle.mouseOver = false;
        circle.set('opacity', 1.0);
        canvas.renderAll();
    }
});

基本的に、関心のあるオブジェクトの上にいるかどうかを確認するためにすべての面倒な作業を行っており、最初にマウスを上に置いたときにそのプロパティを変更し、次にマウスを外したときに再びプロパティを変更しています。mouseDownこれを変数と組み合わせて、マウスが押されたときにのみこれらのアクションを実行できます。

ここで私のソリューションの動作を確認できます。

http://jsfiddle.net/qwpB3/

于 2013-07-03T01:32:07.460 に答える