Question

我在设置Image实例时尝试使用centeredScaling: true选项缩放图像。我有一个Circle对象是＆＃34; on＆＃34;一个应该是比例的滑块。

以下是示例：http://jsfiddle.net/hellatan/tk1qs8ty/

有几件事： 1.它不会从中心扩展 2.圆形物体的起点没有正确地正确缩放图像（我猜测我不得不为这一个调整一些数学）

任何人都有任何关于我做错事的线索（主要是＃1，＃2也会知道加分）。

不要介意代码的邋iness =）

Answer 1

尝试将x和y的原点设置为居中，并调整图像的初始x和y

imgInstance.set({
        scaleY: imgH / origH,
        scaleX: imgW / origW,
        originX: "center", 
        originY: "center"
    });

Answer 2

第一步，我们在调用图像中心后添加比例。然后规模将成为中心：

imgInstance.scale(my_value).center().setCoords()

Answer 3

我周围有个骇客，基本上它是在包装器中将点与中心之间转换以进行缩放/旋转。

小提琴：http://jsfiddle.net/ywu45fpd/

翻译点的功能

canvas

fabric.util.object.extend(fabric.Canvas.prototype, { _scale: function(e, target, value) { var scale = value, needsOriginRestore = false; if ((target.originX !== 'center' || target.originY !== 'center') && target.centeredRotation) { target.setOriginToCenter(target); needsOriginRestore = true; } target.animate({ scaleX: scale, scaleY: scale }, { onChange: canvas.renderAll.bind(canvas), easing: fabric.util.ease.easeOutQuad, onComplete: function() { if (needsOriginRestore) { target.setCenterToOrigin(target); } target.setCoords(); }, }) canvas.renderAll(); }, });上的新方法：

mouse:up

有关用法（请参见canvas._scale(e, target, 2)），请参见myView上的小提琴

可以使用同一包装器进行旋转。

从中心缩放图像（fabricjs）

3 个答案: