FabricJS基本操作
百里君博
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
<script src="js/fabric.js"></script>
</head>
<body>
<canvas id="myContainer"></canvas>
<script>
var myContainer = document.getElementById("myContainer")
myContainer.width = window.innerWidth;
myContainer.height = window.innerHeight;
var zoom, zoomPoint;
var panning = false
const canvas = new fabric.Canvas('myContainer')
//canvas.width = window.innerWidth,
//canvas.height = window.innerHeight,
canvas.setBackgroundImage("module/BackgroundImage.png", canvas.renderAll.bind(canvas), {
//width: canvas.width,
//height: canvas.height,
//originX:'left',
//originY: 'top',
crossorigin:'anonymous'
});
canvas.on({
"mouse:wheel": (e) => {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
zoom = Math.max(0.1, zoom); //最小为原来的1/10
zoom = Math.min(3, zoom); //最大是原来的3倍
zoomPoint = new fabric.Point(e.pointer.x, e.pointer.y);
canvas.zoomToPoint(zoomPoint, zoom);
},
"mouse:down": (e) => {
panning = true;
canvas.selection = false;
},
"mouse:up": (e) => {
panning = false;
canvas.selection = true;
},
"mouse:move": (e) => {
if (panning && e && e.e) {
let delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
}
})
canvas.zoomToPoint({
x:100,
y:50
}, 0.25 )
</script>
</body>
</html>
类似资料：