Question

如何在FabricJS画布上定位某些类型的对象。

仅限iText对象，仅限形状或仅限svg对象。

如果我们以iText为例，我并不是指那些说“你好”的目标。还有一个说再见＆＃39;再见＆＃39;但所有 iText对象和不形状对象。

对于下面的演示，鼠标：向下功能应该适用于iText而不是矩形（请注意矩形可能并不总是有一个矩形）。

＆＃13;

var canvas = this.__canvas = new fabric.Canvas('canvas');

// Example function to apply to 1 type of object only
canvas.on('mouse:down', function(e) {
    if (e.target) {
        if (!e.target.__corner) {
            e.target.toggle('flipX');
            canvas.renderAll();
        }
        e.target.__corner = null;
    }
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
// set rectangle gradient
rect.setGradient('fill', {
    type: 'linear',
    x1: -rect.width / 2,
    y1: 0,
    x2: rect.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});
canvas.add(rect);

//create text
var text = new fabric.IText('Hello World!',{
  	top:100,
  	left:200,
  	textBackgroundColor: '#000',
  	fontSize:30,
  	fill: 'white',
  	fontWeight: 'bold',
  	textAlign: 'center',
});
canvas.add(text);

canvas.renderAll();

＆＃13;

#canvas { background-color:#f4f4f4; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>

<canvas id="canvas" width="400" height="300"></canvas>

＆＃13;

Answer 1

要定位某些类型的对象，您必须在水平翻转之前检查对象类型。这些是一些对象类型 rect，i-text，path-group 等。

/*** available object types ***/
/*
| Object |                Type                |
|--------|------------------------------------|
| Shape  | rect, circle, polygon and so on... |
| Text   | i-text                             |
| Image  | image                              |
| SVG    | path-group                         |
*/

var canvas = this.__canvas = new fabric.Canvas('canvas');

// mouse event
canvas.on('mouse:down', function(e) {
    if (e.target) {
        var objType = 'path-group';
        if (!e.target.__corner && e.target.type === objType) {
            e.target.toggle('flipX');
            canvas.renderAll();
        }
        e.target.__corner = null;
    }
});

// create a rectangle
var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 100,
    height: 50,
    angle: 20,
    fill: 'red'
});
// set rectangle gradient
rect.setGradient('fill', {
    type: 'linear',
    x1: -rect.width / 2,
    y1: 0,
    x2: rect.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});
canvas.add(rect);

//create text
var text = new fabric.IText('Hello World!', {
    top: 100,
    left: 200,
    textBackgroundColor: '#000',
    fontSize: 30,
    fill: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
});
canvas.add(text);

// add image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
    img.set({
        top: 150,
        left: 200
    })
    img.scaleToWidth(100);
    img.scaleToHeight(100);
    canvas.add(img);
});

// add svg
fabric.loadSVGFromURL('https://istack.000webhostapp.com/drop.svg', function(objects, options) {
    var svg = fabric.util.groupSVGElements(objects, options);
    svg.set({
        top: 150,
        left: 40
    })
    canvas.add(svg);
});

canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>

Answer 2

尝试使用e.target.type。

＆＃13;

var canvas = this.__canvas = new fabric.Canvas('canvas');

// Example function to apply to 1 type of object only
canvas.on('mouse:down', function(e) {
  if (e.target && e.target.type === "i-text") {
    if (!e.target.__corner) {
      e.target.toggle('flipX');
      canvas.renderAll();
    }
    e.target.__corner = null;
  }
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
// set rectangle gradient
rect.setGradient('fill', {
  type: 'linear',
  x1: -rect.width / 2,
  y1: 0,
  x2: rect.width / 2,
  y2: 0,
  colorStops: {
    0: '#ffe47b',
    1: 'rgb(111,154,211)'
  }
});
canvas.add(rect);

//create text
var text = new fabric.IText('Hello World!', {
  top: 100,
  left: 200,
  textBackgroundColor: '#000',
  fontSize: 30,
  fill: 'white',
  fontWeight: 'bold',
  textAlign: 'center',
});
canvas.add(text);

canvas.renderAll();

＆＃13;

#canvas {
  background-color: #f4f4f4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>

<canvas id="canvas" width="400" height="300"></canvas>

＆＃13;

FabricJS仅将函数应用于某些类型的对象

2 个答案: