通过不使用组 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>