您选择将图像显示为缩放的方式非常繁重。 有更快的方式,不需要所有这些图纸。
您的解决方案涉及在新画布上创建一个模式。与缓存
画布 模式创造 平局矩形 画布创作 平局图像这是一个简单的解决方案,不涉及图案或缓存。
它包括在重写fabric.Image渲染的方法来表现不同使用自定义个zoomLevel财产和ctx.drawImage(的完整签名)
fabric.Image.prototype._render = function(ctx) {
var fwidth = this._element.width/(this.zoomLevel + 1);
var fheight = this._element.height/(this.zoomLevel + 1);
var wdiff = (fwidth - this._element.width)/2;
var hdiff = (fheight - this._element.height)/2;
ctx.drawImage(this._element, -wdiff, -hdiff, fwidth, fheight, -this.width/2, - this.height/2, this.width, this.height);
}
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Image.fromURL("https://images2.alphacoders.com/147/147320.png", function(img) {
var zoomLevel = 0;
var zoomLevelMin = 0;
var zoomLevelMax = 3;
img.zoomLevel = 0
img.scale(0.1);
canvas.add(img);
img.zoomIn = function() {
if (zoomLevel < zoomLevelMax) {
zoomLevel += 0.1;
img.zoomLevel = zoomLevel;
}
};
img.zoomOut = function() {
zoomLevel -= 0.1;
if (zoomLevel < 0) zoomLevel = 0;
if (zoomLevel >= zoomLevelMin) {
img.zoomLevel = zoomLevel;
}
};
});
canvas.on('mouse:wheel', function(option) {
var imgObj = canvas.getActiveObject();
if (!imgObj) return;
option.e.preventDefault();
if (option.e.deltaY > 0) {
imgObj.zoomOut();
} else {
imgObj.zoomIn();
}
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script>
<h1> FabricJS imageHelper</h1>
<div id="canvasContainer">
<canvas id="c" width="1920" height="600"></canvas>
</div>
<br>
它没有解决我的问题。但它比我的实现更简单,更快捷。太好了!非常感谢@AndreaBogazzi。 – Jacky
所以我可能没有得到你的问题。你能解释得更好吗? – AndreaBogazzi