我使用vue和Fabric.js开发了缩放图片的功能。当我从服务器界面获得不同的图片参数时,仍可以刷新画布,但是当我拖动并缩放时,图片将跳至第一个请求的图片
这是我的代码
//template
<canvas id="canvas" width="500px" ref="can" height="480px" style="border: 1px solid #333"></canvas>
//script
initCanvas (url) {
var canvas = new Fabric.Canvas('canvas')
canvas.setBackgroundImage(
url,
canvas.renderAll.bind(canvas),
{
scaleX: canvas.width / 1654,
scaleY: canvas.height / 2338
}
)
canvas.on('mouse:down', function (e) {
this.panning = true
canvas.selection = false
})
canvas.on('mouse:up', function (e) {
this.panning = false
canvas.selection = true
})
canvas.on('mouse:move', function (e) {
if (this.panning && e && e.e) {
var delta = new Fabric.Point(e.e.movementX, e.e.movementY)
canvas.relativePan(delta)
}
})
canvas.on('mouse:wheel', function (e) {
var zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom()
zoom = Math.max(0.1, zoom)
zoom = Math.min(3, zoom)
var zoomPoint = new Fabric.Point(event.pageX, event.pageY)
canvas.zoomToPoint(zoomPoint, zoom)
})
},
您可以尝试使用fabric.Image.fromURL
fabric.Image.fromURL(url, function (img) {
canvas.setBackgroundImage(img);
canvas.setHeight(img.height);
canvas.setWidth(img.width);
});