Fabricjs - マウスボタンを離さずにオブジェクトを選択解除してグループを選択するには

Question

キャンバスに3つのファブリックオブジェクトがあり、1つのオブジェクトとしてrectとtextがグループ化されています。オブジェクト：グループオブジェクトと別の矩形の間を移動する。これらは、「スピーチバブル」のように見え、グループとrect（ポインタ）は両方とも移動可能です。

私が達成したいのは、ポリゴンをマウスでクリックすると、マウスを押したまま3つのオブジェクトをすべて移動できることです。細かい

一緒にこれまでのところ私が持っているもののグループの項目を、しかし、あなたは、多角形を選択する場合にのみ、再びをグループをクリックし、マウスボタンを離し、マウスを押したまま、その後、すべての項目を移動することができますし、グループを移動します。

私は次のキャンバスメソッドを試してみましたが、クリックでポリゴンを「選択解除」するかもしれないと思っていましたが、どれも動作していないようです。

canvas.deactivateAllWithDispatch(); 
canvas.deactivateAll(); 
canvas.discardActiveObject(); 

私がこれまで持っているプロトタイプのJsfiddleはここにある：

http://jsfiddle.net/beewayne/3y2x3vty/

Answer 1

私は少し周りを台無しにし、私が得た最高のは、ユーザーが手動になるまで一緒にオブジェクトやグループを移動することですはじめてマウスをつかむ。

私はもっとこのように見えるようにマウスダウンリスナーを修正：グループにオブジェクトを追加すると、それは少し「ジャンプ」を作るため、

shape.on('mousedown', function(evt) { 

    var objs = canvas.getObjects(); 

    var group = new fabric.Group(objs, {status: 'moving'}); 

    // Relevant code 
    var originalX = shape.left, 
     originalY = shape.top, 
     mouseX = evt.e.pageX, 
     mouseY = evt.e.pageY; 

    canvas.on('object:moving', function(evt) { 
     shape.left = originalX; 
     shape.top = originalY; 
     group.left += evt.e.pageX - mouseX; 
     group.top += evt.e.pageY - mouseY; 
     originalX = shape.left; 
     originalY = shape.top; 
     mouseX = evt.e.pageX; 
     mouseY = evt.e.pageY; 
    }); 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
    }); 

    // clean up the listener 
    shape.on('mouseup', function(evt) { 
    canvas.off('object:moving'); 
    }); 

私は、オフセットマウスを使用していました。また、オブジェクトを同じ位置に連続的に設定するので、グループ内を移動しません。

http://jsfiddle.net/kqfswu4b/1/