Question

属性“ subTargetCheck = true”允许事件触发组中的对象。

但是，如果此对象是iText，则在该iText上单击2次后，该组将被锁定（尽管锁定属性为false）。（如果对象是Rect，则可以正常工作。）

请查看fiddle.net：https://jsfiddle.net/b5ecst8u/1/。

var canvas = _canvas = new fabric.Canvas('c');

// ------- create an itext object -------------
var iText = new fabric.IText('lorem ipsum\ndolor\nsit Amet\nconsectetur', {
    left: 170, top: 50, fontFamily: 'Helvetica', fill: '#333', scaleX: 0.6,
 scaleY:0.6, });

// ------- create iText2 itext object -------------
 var iText2 = new fabric.IText('foo bar\nbaz\nquux', {
    left: 450, top: 250, fontFamily: 'Helvetica', fill: '#333',
        });
iText2.on('mousedown', function(e) { console.log("event mousedown on subtarget iText2"); });
// ------- create iText3 itext object -------------
 var iText3 = new fabric.IText('click\nhere\nseveral\ntimes', {
    left: 550, top: 350, fontFamily: 'Helvetica', fontSize: 21, fill: '#333',
    });

iText3.on('mousedown', function(e) { console.log("event mousedown on subtarget iText3"); });
// ------- create a rectangle object -------------
var rect = new fabric.Rect({
  left: 100, top: 100, fill: 'red', width: 50, height: 50 });
rect.on('mousedown', function(e) { console.log("event mousedown on subtarget rect"); });
// create groups  -------------
var grp  = new fabric.Group([ iText, rect ], { left: 20, top: 100,
selectable: true,
});
var grp2  = new fabric.Group([ iText2, iText3 ], {
left: 250, top: 50, selectable: true, });
//------ subTargetCheck -------------
grp.subTargetCheck = true;
grp2.subTargetCheck = true;
//------ adding to canvas ----------------------
canvas.add(grp, grp2);

即使未在任何对象上设置事件处理程序，也会发生锁定。复制group.subTargetCheck = true就足够了。

谢谢您的建议。

Fabric.js 1.7.22：单击“ iText”子目标锁定组

0 个答案: