我想为我的activeObject提供一个函数,我可以在其中放大照片。 我尝试了下面的代码,但问题是这需要大约5秒钟。 如何提高缩放性能并减少这段时间。
zoomBy: function (x, y, z, canvasFabric, callback) {
debugger;
if (x || y) { this.zoomedXY = true; }
this.cx += x;
this.cy += y;
if (z) {
this.cw -= z;
this.ch -= z / (this.width / this.height);
}
if (z && !this.zoomedXY) {
// Zoom to center of image initially
this.cx = this.width / 2 - (this.cw / 2);
this.cy = this.height / 2 - (this.ch / 2);
}
if (this.cw > this.width) { this.cw = this.width; }
if (this.ch > this.height) { this.ch = this.height; }
if (this.cw < 1) { this.cw = 1; }
if (this.ch < 1) { this.ch = 1; }
if (this.cx < 0) { this.cx = 0; }
if (this.cy < 0) { this.cy = 0; }
if (this.cx > this.width - this.cw) { this.cx = this.width - this.cw; }
if (this.cy > this.height - this.ch) { this.cy = this.height - this.ch; }
this.rerender(canvasFabric, callback);
},
rerender: function (canvasFabric, callback) {
var img = new Image(), obj = this;
img.onload = function () {
debugger;
var canvas = fabric.util.createCanvasElement();
canvas.width = obj.width;
canvas.height = obj.height;
canvas.getContext('2d').drawImage(this, obj.cx, obj.cy, obj.cw, obj.ch, 0, 0, obj.width, obj.height);
img.onload = function () {
obj.setElement(this);
obj.applyFilters(canvasFabric.renderAll.bind(canvasFabric));
obj.set({
left: obj.left,
top: obj.top,
angle: obj.angle
});
obj.setCoords();
if (callback) { callback(obj); }
};
debugger;
img.src = canvas.toDataURL('image/png');
};
debugger;
img.src = this.orgSrc;
},
我看到其他人有这个问题,但找不到任何解决办法。 当然有一个答案here 但我不知道如何使用它
答案 0 :(得分:0)
我为缩放照片做了什么,我更改了照片的比例并重置了对象的cropX
,cropY
,height
和width
,以便容器尺寸相同。它对我来说很完美
您可以试试这个,请记住我只对缩放进行了更改,因为您可以在条件中看到z
的值。 HTML中也有一些变化。
HTML
<button type="button" onclick="demo.zoomBy(0,0,0.01)">Zoom in</button>
<button type="button" onclick="demo.zoomBy(0,0,-0.01)">Zoom out</button>
JS
zoomBy: function(x, y, z, callback)
{
if (x || y) { this.zoomedXY = true; }
this.cx += x;
this.cy += y;
if (z) {
this.cw -= z;
this.ch -= z/(this.width/this.height);
}
if (z && !this.zoomedXY) {
// Zoom to center of image initially
console.info(this)
var origScale = this.scaleX;
var currentScale = (origScale+z);
var origWidth = this.cw, origHeight = this.ch;
this.scaleX = currentScale;
this.scaleY = currentScale;
this.cx = this.cx - (origWidth/(currentScale/origScale)-this.cw)/2;
this.cy = this.cy - (origHeight/(currentScale/origScale)-this.ch)/2;
this.cw = origWidth/(currentScale/origScale);
this.ch = origHeight/(currentScale/origScale);
/* this.cx = this.width / 2 - (this.cw / 2);
this.cy = this.height / 2 - (this.ch / 2); */
}
if (this.cw > this.width) { this.cw = this.width; }
if (this.ch > this.height) { this.ch = this.height; }
if (this.cw < 1) { this.cw = 1; }
if (this.ch < 1) { this.ch = 1; }
if (this.cx < 0) { this.cx = 0; }
if (this.cy < 0) { this.cy = 0; }
if (this.cx > this.width - this.cw) { this.cx = this.width - this.cw; }
if (this.cy > this.height - this.ch) { this.cy = this.height - this.ch; }
//this.rerender(callback);
this.canvas.renderAll();
},