FabricJS基本操作

最新推荐文章于 2026-04-11 20:20:44 发布

原创最新推荐文章于 2026-04-11 20:20:44 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Canvas与WebGL

本文介绍使用fabric.js库实现网页画布的缩放和平移功能，包括响应鼠标滚轮进行缩放，鼠标点击并拖动进行平移等交互操作。通过canvas元素，fabric.js提供了一个强大的绘图环境，支持复杂的图像处理和用户交互。

<!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>