【发布时间】：2017-01-31 03:04:15
【问题描述】：
我正在使用 fabricjs 画布库。我找不到fabricjs的动画方法或支持库。
我想要做的是放大对象。我不想缩放对象大小。每个对象画布都将就位。
我想做的是添加效果，例如相机在放大时聚焦在特定对象上。当我们缩小时。它会进入初始状态，就像相机在物体上移动，然后从物体移出到初始状态。
这是我迄今为止尝试过的：
var jsonData = {"objects":[{"type":"textbox","originX":"left","originY":"top","left":279.36,"top":102.23,"width":153,"height":29.83,"fill":"#333","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.01,"scaleY":1.01,"angle":0,"flipX":false,"flipY":false,"opacity":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(102,153,255,0.75)","cornerColor":"rgba(102,153,255,0.5)","borderScaleFactor":1,"editable":false,"selectable":true,"text":"First","fontSize":24,"fontWeight":"normal","fontFamily":"Lato","fontStyle":"","lineHeight":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":"#333","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.01,"scaleY":1.01,"angle":0,"flipX":false,"flipY":false,"opacity":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(102,153,255,0.75)","cornerColor":"rgba(102,153,255,0.5)","borderScaleFactor":1,"editable":false,"selectable":true,"text":"Second","fontSize":24,"fontWeight":"normal","fontFamily":"Lato","fontStyle":"","lineHeight":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":"#333","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.01,"scaleY":1.01,"angle":0,"flipX":false,"flipY":false,"opacity":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(102,153,255,0.75)","cornerColor":"rgba(102,153,255,0.5)","borderScaleFactor":1,"editable":false,"selectable":true,"text":"Third","fontSize":24,"fontWeight":"normal","fontFamily":"Lato","fontStyle":"","lineHeight":1.1,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{},"minWidth":20}
],"background":""};
var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(jsonData, canvas.renderAll.bind(canvas), function(o, object) {
fabric.log(o, object);
});
canvas.on('mouse:down', function(e) {
console.log(e);
})
var canvasScale = 1;
var SCALE_FACTOR = 1.5;
var opt = {
zoomIn : function(zObj){
setTimeout(function(){
canvas.forEachObject(function(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) });
obj.animate('left', obj.left*SCALE_FACTOR, {duration:3000, onChange: canvas.renderAll.bind(canvas) });
obj.animate('top', obj.top*SCALE_FACTOR, {duration:3000, onChange: canvas.renderAll.bind(canvas) });
});
},1000);
},
zoomOut : function(){
setTimeout(function(){
canvas.forEachObject(function(obj){
obj.animate('scaleX', '1', {duration:3000, onChange: canvas.renderAll.bind(canvas) });
obj.animate('scaleY', '1', {duration:3000, onChange: canvas.renderAll.bind(canvas) });
obj.animate('left', '-=120', {duration:3000, onChange: canvas.renderAll.bind(canvas) });
obj.animate('left', '-=120', {duration:3000, onChange: canvas.renderAll.bind(canvas) });
});
},1000);
}
}
opt.zoomIn(jsonData.objects[0]);
setTimeout(function(){
// opt.zoomOut();
},10000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js" integrity="sha256-JYw55W/ryDNiuvQUTPU0zXflTPF/HDlrIXv8+kfP5fM=" crossorigin="anonymous"></script>
<canvas id="c" width="450" height="250" style="width:800px; height:400px; border:2px solid black;"></canvas> 【问题讨论】：
-
在画布中缩放和缩放一样，你改变用户的感知，让它看起来像缩放。
-
我也在做同样的事情，但没有预期的那么顺利。
-
你能在你已经尝试过的sn-p中发布一些示例工作代码吗？
-
@StefanHayden 感谢您的回复。我已经找到了解决方案。我正在发布问题（fiddle.jshell.net/5KKQ2/811）以及解决方案。
标签： javascript angularjs canvas fabricjs