Javascript 平滑缩放fabricjs对象

我正在使用fabricjs画布库。我找不到fabricjs的动画方法或支持库

我要做的是缩放对象。我不想缩放对象的大小。每个对象画布都将位于其所在的位置

我想做的是添加一种效果，就像相机在放大时聚焦在一个特定的物体上一样。当我们缩小时。它将以初始状态出现，就像摄影机在对象处移动，然后从对象移动到初始状态

以下是我迄今为止所尝试的：

var jsonData={“objects”：[{“type”：“textbox”，“originX”：“left”，“originY”：“top”，“left”：279.36，“top”：102.23，“width”：153，“height”：29.83，“fill”：“stroke”：null，“strokeDashArray”：null，“strokeLineCap”：“butt”，“strokeLineJoin”：“miter”，“strokiterlimit”：10，“scaleX”：1.01，“scaleY”：1.01，“angle”：0，“flipX”：false，“flipY”：false，“不透明度”：1，“阴影”：null，“可见”：true，“clipTo”：null，“backgroundColor”：“fillRule”：“nonzero”，“globalCompositeOperation”：“source over”，“transformMatrix”：null，“skewX”：0，“skewY”：0，“id”：1474621288211，“hasControls”：false，“objType”：“text”，“attr”：“{}”，“borderColor”：“rgba（102153255,0.75）”，“cornerColor”：“rgba（102153255,0.5）”，“borderScaleFactor”：1，”可编辑：false，“可选”：true，“文本”：“第一”，“fontSize”：24，“fontWeight”：“正常”，“fontFamily”：“Lato”，“fontStyle”：“线宽”：1.1，“textDecoration”：“textAlign”：“left”，“textBackgroundColor”：“styles”：{}，“minWidth”：20}，
{“type”：“textbox”，“originX”：“left”，“originY”：“top”，“left”：100.36，“top”：160.23，“width”：153，“height”：29.83，“fill”：“stroke”：null，“strokeWidth”：1，“strokeDashArray”：null，“strokeLineCap”：“butt”，“strokeLiterLimit”：10，“scaleX”：1.01，“scaleY”：1.01，“angle”：0，“flipX”：false，“flipY”：false，“不透明”：1，“shadow”：null，“可见”：true，”clipTo“：null，“backgroundColor”：“，”fillRule“：”nonzero“，”globalCompositeOperation“：”source over“，”transformMatrix“：null，“skewX“：0，“skewY“，”0，“id“：1474621288211，”hasControls“，”false“，”objType“：”text“，”attr“{}”，“borderColor:”rgba（102153255,0.75）”，“cornerColor:”rgba（102153255,0.5）”，“borderScaleFactor:”1，“可编辑的”：false“，”可选的“，”true“第二，“fontSize”：24，“fontWeight”：“normal”，“fontFamily”：“Lato”，“fontStyle”：“线宽”：1.1，“textDecoration”：“textAlign”：“left”，“textBackgroundColor”：“styles”：{}，“minWidth”：20}，
{“type”：“textbox”，“originX”：“left”，“originY”：“top”，“left”：10.36，“top”：10.23，“width”：153，“height”：29.83，“fill”：“stroke”：null，“strokeWidth”：1，“strokeDashArray”：null，“strokeLineCap”：“butt”，“strokeLiterLimit”：10，“scaleX”：1.01，“scaleY”：1.01，“angle”：0，“flipX”：false，“flipY”：false，“不透明”：1，“shadow”：null，“可见”：true，”clipTo“：null，“backgroundColor”：“，”fillRule“：”nonzero“，”globalCompositeOperation“：”source over“，”transformMatrix“：null，“skewX“：0，“skewY“，”0，“id“：1474621288211，”hasControls“，”false“，”objType“：”text“，”attr“{}”，“borderColor:”rgba（102153255,0.75）”，“cornerColor:”rgba（102153255,0.5）”，“borderScaleFactor:”1，“可编辑的”：false“，”可选的“，”true“第三，“fontSize”：24，“fontWeight”：“normal”，“fontFamily”：“Lato”，“fontStyle”：“线宽”：1.1，“textDecoration”：“textAlign”：“left”，“textBackgroundColor”：“styles”：{}，“minWidth”：20}
]，“背景”：“}；
var canvas=newfabric.canvas（'c'）；
loadFromJSON（jsonData、canvas.renderAll.bind（canvas）、函数（o、对象）{
fabric.log（o，object）；
});
canvas.on（'mouse:down'，函数（e）{
控制台日志（e）；
})
var-canvascale=1；
var标度系数=1.5；
变量opt={
zoomIn:函数（zObj）{
setTimeout（函数（）{
canvas.forEachObject（函数（obj）{
obj.animate（'scaleX'，obj.scaleX*SCALE_FACTOR，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
obj.animate（'scaleY'，obj.scaleY*SCALE_FACTOR，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
animate（'left'，obj.left*比例因子，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
动画（'top'，obj.top*比例因子，{持续时间：3000，onChange:canvas.renderAll.bind（canvas）}）；
});
},1000);
},
zoomOut:函数（）{
setTimeout（函数（）{
canvas.forEachObject（函数（obj）{
animate（'scaleX'，'1'，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
animate（'scaleY'，'1'，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
对象动画（'left'，'-=120'，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
对象动画（'left'，'-=120'，{duration:3000，onChange:canvas.renderAll.bind（canvas）}）；
});
},1000);
}
} 
opt.zoomIn（jsonData.objects[0]）；
setTimeout（函数（）{
//opt.zoomOut（）；
},10000);

---

在这里，我试图缩放特定的对象，因为相机聚焦在特定的对象上，它应该会平稳运行。但是，在使用缩放对象时，很难管理特定对象的位置，因为我们永远不知道在运行时对象将放置在何处

解决方案：

var jsonData={“objects”：[{“type”：“textbox”，“originX”：“left”，“originY”：“top”，“left”：279.36，“top”：102.23，“width”：153，“height”：29.83，“fill”：“stroke”：null，“strokeDashArray”：null，“strokeLineCap”：“butt”，“strokeLineJoin”：“miter”，“strokeinterlimit”：10，“scaleX”：1.01，“scaleY”：1.01，“angle”：0，“flipX”：false，“flipY”：false，“flipY”：false，”不透明度：1，“shadow”：null，“visible”：true，“clipTo”：null，“backgroundColor”：“fillRule”：“nonzero”，“globalCompositeOperation”：“source over”，“transformMatrix”：null，“skewX”：0，“skewY”：0，“id”：1474621288211，“hasControls”：false，“objType”：“text”，“attr”：“{}”，“borderColor”：“rgba（102153255,0.75）”，“cornerColor”