如何使用带有结构js的画布上的每个对象使用isType（）？ [英] How do I use if isType() for each object on a canvas with fabric js?

问题描述

我试图在画布上显示每个对象的某些属性，但是我很难编写代码来执行此操作。例如。我希望下面的代码能够识别形状，文本和图像对象之间的区别，并根据类型显示属性。

I am trying to show certain attributes for each object on a canvas, but I am having a difficult time writing the code to do so. E.G. I want the code below to identify the difference between a shape, text, and image objects and show attributes based off the type.

console.log的属性：

Attributes to console.log:

对于canavas上的每个对象，检查是否 -

for each object on canavas check to see if -

• 图像然后URL（来源）和比例< =我有一个困难的时间
  显示图像的来源和名称。


• 文字然后字体系列，字体大小，颜色，比例


• 形状然后缩放和颜色

我需要添加/删除/更改才能使其正常工作？

What do I need to add/remove/change to make it work?

这是一个JS小提琴示例：
https://jsbin.com/vevihikefo/1/edit?html,js,console,output

Here is a JS fiddle example: https://jsbin.com/vevihikefo/1/edit?html,js,console,output

canvas.getObjects().forEach(object=>{
    if(object.isType('xyz')) { // object is a shape
      console.log(object.scaleX, object.fill);
    } else if(object.isType('text')) { // object is a text
      console.log(object.text, object.fontFamily, object.fontSize*3, object.scaleX, object.fill);
    } else { // object is an image
      console.log(object.name, object.scaleX, object.fill);
    }
})

推荐答案

有两件事需要添加/更改，以使其工作...

There are two things that need to be added / changed, to make it work ...

• 更改对象。 isType（'xyz'）到！object.isType（'text'）&& ！object.isType（'image'） （因为没有任何类型称为'xyz'）


• 包裹整个用于在函数中获取对象属性并在图像加载时调用函数的代码，以正确获取图像对象属性。

• change object.isType('xyz') to !object.isType('text') && !object.isType('image')      ( as there isn't any type called 'xyz' )
• wrap the entire code for getting the objects attributes in a function and call that function on image load, to get the image object attributes properly.

fabric.Object.prototype.objectCaching = false;
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Text('foo', {
    fontFamily: 'Roboto',
    left: 100,
    top: 100,
    fontSize: 25
}));
canvas.add(new fabric.Text('help', {
    fontFamily: 'Roboto',
    left: 100,
    top: 200,
    fontSize: 25
}));
canvas.add(new fabric.Triangle({
    fill: 'green',
    left: 200,
    top: 200
}));
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
    //i create an extra var for to change some image properties
    var img1 = myImg.set({
        left: 200,
        top: 0,
        width: 150,
        height: 150
    });
    canvas.add(img1);
    getAttributes();
});
canvas.renderAll();

function getAttributes() {
    canvas.getObjects().forEach(object => {
        if (!object.isType('text') && !object.isType('image')) { // object is a shape
            console.log(object.scaleX, object.fill);
        } else if (object.isType('text')) { // object is a text
            console.log(object.text, object.fontFamily, object.fontSize * 3, object.scaleX, object.fill);
        } else if (object.isType('image')) { // object is an image
            console.log(object.name, object.scaleX, object.fill);
        }
    });
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width="800" height="600" style="border: 1px solid #d3d3d3; position: absolute;">
Your browser does not support the canvas element.
</canvas>

这篇关于如何使用带有结构js的画布上的每个对象使用isType（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！