如果使用isType（）作爲布料js的畫布上的每個對象，我該如何使用？

我想在畫布上顯示每個對象的某些屬性，但是我很難編寫代碼來這樣做。例如。我希望下面的代碼能夠識別形狀，文本和圖像對象之間的差異，並根據類型顯示屬性。如果使用isType（）作爲布料js的畫布上的每個對象，我該如何使用？

屬性到CONSOLE.LOG：

對canavas每個對象檢查，看看是否 -

圖片然後URL（源）和刻度< =我有困難的時候表示源和圖像的名稱。
文本，然後字體，字體大小，顏色，規模
形狀，然後規模和顏色

我需要做什麼來添加/刪除/修改，使其工作？

下面是一個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); 
    } 
})

來源

2017-04-01 sabah

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

變化object.isType('xyz')到!object.isType('text') && !object.isType('image')（因爲沒有任何類型稱爲'xyz'）
包裝獲取對象的整個代碼attr同步於函數，並在圖像加載時調用函數以正確獲取圖像對象屬性。

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>

來源

2017-04-01 11:49:59

如果使用isType（）作爲布料js的畫布上的每個對象，我該如何使用？

回答

相關問題