我正在使用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>