在fabricjs中縮放后如何進行圖像轉換？

Question

當圖像的比例改變時，只有單擊它，才能進行變換。 並且，您甚至可以從圖像的矩形邊界之外移動圖像。 這很奇怪。

圖像比例更改后，我應該能夠在不單擊圖像的情況下變換圖像。 怎么做 ？

test = function(type){
var obj = activeobj[0].getBoundingRect().height;

if(type === 'fb'){
this.image.set({
  scaleX: 0.5,
  scaleY: 0.5
 });
 canvas.renderAll();
} else {
 this.image.set({
  scaleX: 0.25,
  scaleY: 0.25
 });
 canvas.renderAll();
 }
}

https://jsfiddle.net/hazeebp/2z9yb1nd/43/

Answer 1

使用object.setCoords（）設置對象的角坐標。

這是更新的小提琴

演示

 var canvas = this.__canvas = new fabric.Canvas('c'); canvas.setHeight(400); canvas.setWidth(400); let image; // Left Image fabric.Image.fromURL(`http://www.qygjxz.com/data/out/248/3979080-wallpaper-xperia.png`, (img) => { img.set({ left: 0, stroke : 'red', strokeWidth : 20, id:'wallpaper', top: 0 }); image = img; img.scaleToWidth(300); img.scaleToHeight(300); canvas.add(img).setActiveObject(img); }) var activeobj = canvas.getObjects(); test = function(type){ if(type === 'fb'){ image.set({ scaleX: 0.5, scaleY: 0.5 }); } else { image.set({ scaleX: 0.25, scaleY: 0.25 }); } image.setCoords(); canvas.requestRenderAll(); } 

 canvas { border: 1px solid #999; } 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <input type="button" value="Plus" onclick="test('fb')"> <input type="button" value="Minus" onclick="test('insta')"> <canvas id="c"> </canvas>