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

Question

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

例如仅 iText 对象、仅形状或仅 svg 对象。

如果我们以 iText 为例，我的意思不是说目标 'Hello' 和目标 'Goodbye' 而是 all iText 对象和不是形状对象。

在下面的演示中，mouse:down 函数应该应用于 iText 而不是矩形（请记住，矩形可能并不总是具有 var rect）。

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();

#canvas { background-color:#f4f4f4; }

<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>

Answer 1

尝试使用 e.target.type。

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();

#canvas {
  background-color: #f4f4f4;
}

<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>

Answer 2

要定位特定类型的对象，您必须在水平翻转之前检查对象类型。这些是一些对象类型 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>

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

FabricJS apply function only to certain types of object

javascript

jquery

canvas

fabricjs