通過不使用組 fabric.js 縮放矩形來縮放圖像

Question

我是 fabric.js 的新手，想要實現一項功能，我添加了圖像和一個相同大小的圖像矩形，現在我想在縮放矩形的同時縮放圖像。 我不想對對象進行分組，圖像應該通過縮放矩形來縮放，左上角是圖像的頂部 position

下面是我的代碼

 var imgURL = 'http://i.imgur.com/8rmMZI3.jpg'; var canvas = new fabric.Canvas('canvas'); var pug; var pugImg = new Image(); pugImg.onload = function (img) { pug = new fabric.Image(pugImg, { angle: 0, width: 500, height: 500, left: 50, top: 70, scaleX: .25, scaleY: .25, selectable: false }); var rect = new fabric.Rect({ top: 65, left: 200, width: 150, height: 150, fill: 'red', }); canvas.sendToBack(rect); canvas.bringToFront(pug); canvas.add(rect); canvas.add(pug); canvas.renderAll(); }; pugImg.src = imgURL; canvas.on('object:scaling', function(e) { var bounds = e.target.getBoundingRect(); pug.set({ width: bounds.width, height: bounds.height, top: bounds.top, left: bounds.left }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script> <canvas id="canvas" width=400 height=400></canvas>

Answer 1

我添加了圖像和一個相同大小的圖像的矩形

在您的示例中，矩形與圖像的大小不同

rect = {
  width: 150,
  height: 150,
  scaleX: 1,
  scaleY: 1,
}
pug = {
    width: 500,
    height: 500,
    scaleX: .25,
    scaleY: .25
});

為了達到想要的效果，你需要給主題相同（寬度，高度，scaleX，scaleY），然后只需將rect （scaleX，scaleY）復制到哈巴狗。 否則，如果它們的大小不同，則需要計算兩者之間的比例。

 var imgURL = 'http://i.imgur.com/8rmMZI3.jpg'; var canvas = new fabric.Canvas('canvas'); var pug, rect; var pugImg = new Image(); pugImg.onload = function (img) { pug = new fabric.Image(pugImg, { angle: 0, width: 500, height: 500, left: 50, top: 70, scaleX: .25, scaleY: .25, selectable: false }); rect = new fabric.Rect({ top: 65, left: 200, width: 500, height: 500, scaleX: .25, scaleY: .25, fill: 'red', }); canvas.sendToBack(rect); canvas.bringToFront(pug); canvas.add(rect); canvas.add(pug); canvas.renderAll(); }; pugImg.src = imgURL; canvas.on('object:scaling', function(e) { pug.set({ scaleX: rect.scaleX, scaleY: rect.scaleY, }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script> <canvas id="canvas" width=400 height=400></canvas>