[英]How do I use if isType() for each object on a canvas with fabric js?
我试图显示画布上每个对象的某些属性,但是我很难编写代码来做到这一点。 例如,我希望下面的代码识别形状,文本和图像对象之间的差异,并根据类型显示属性。
console.log的属性:
对于canavas上的每个对象,请检查是否-
要使其正常运行,我需要添加/删除/更改什么?
这是一个JS小提琴示例: 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);
}
})
为了使其正常工作,需要添加/更改两件事...
object.isType('xyz')
更改为!object.isType('text') && !object.isType('image')
(因为没有任何类型称为'xyz') 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.