标签：function Canvas console log canvas 画布 Fabricjs path options

场景

Fabricjs一个简单强大的Canvas绘图库快速入门：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122850075

在上面的基础上，怎样监听画布上鼠标按下、移动、抬起时的事件，以及画布上对象

被选中、被移动、被旋转、被加入和被移除的事件。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、画布的事件监听

      //鼠标按下时事件
      canvas.on('mouse:down', function(options) {
        console.log("mouse:down"+options.e.clientX, options.e.clientY)
      })

      //鼠标移动时事件
      canvas.on('mouse:move', function(options) {
        console.log("mouse:move"+options.e.clientX, options.e.clientY)
      })

      //鼠标抬起时事件
      canvas.on('mouse:up', function(options) {
        console.log("mouse:up"+options.e.clientX, options.e.clientY)
      })

2、对象的事件监听

      //绘制不规则图形
      var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
      path.set({ left: 120, top: 120,fill:'red' });
      //选中监听事件
      path.on('selected', function() {
        console.log('selected');
      });

      //对象移动监听事件
      path.on('moving', function() {
        console.log('moving');
      });

      //对象被旋转监听事件
      path.on('rotating', function() {
        console.log('rotating');
      });

      //对象被加入监听事件
      path.on('added', function() {
        console.log('added');
      });

      //对象被移除监听事件
      path.on('removed', function() {
        console.log('removed');
      });

3、完整示例代码

<template>
  <div>
    <div>
      <canvas id="c" width="800" height="800"></canvas>
    </div>
  </div>
</template>

<script>
import { fabric } from "fabric";
export default {
  name: "HelloFabric",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // create a wrapper around native canvas element (with id="c")
      // 声明画布
      var canvas = new fabric.Canvas("c");

      //鼠标按下时事件
      canvas.on('mouse:down', function(options) {
        console.log("mouse:down"+options.e.clientX, options.e.clientY)
      })

      //鼠标移动时事件
      canvas.on('mouse:move', function(options) {
        console.log("mouse:move"+options.e.clientX, options.e.clientY)
      })

      //鼠标抬起时事件
      canvas.on('mouse:up', function(options) {
        console.log("mouse:up"+options.e.clientX, options.e.clientY)
      })

      // create a rectangle object
      // 绘制图形
      var rect = new fabric.Rect({
        left: 80, //距离画布左侧的距离，单位是像素
        top: 80, //距离画布上边的距离
        fill: "red", //填充的颜色
        width: 20, //方形的宽度
        height: 20, //方形的高度
      });

      // "add" rectangle onto canvas
      //添加图形至画布
      canvas.add(rect);

      //添加图片
      fabric.Image.fromURL('images/light.png', function(oImg) {
        // scale image down, and flip it, before adding it onto canvas
        //缩小图像并翻转它
        oImg.scale(0.5).set('flipX', true);
        canvas.add(oImg);
      });


      //绘制不规则图形
      var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
      path.set({ left: 120, top: 120,fill:'red' });
      //选中监听事件
      path.on('selected', function() {
        console.log('selected');
      });

      //对象移动监听事件
      path.on('moving', function() {
        console.log('moving');
      });

      //对象被旋转监听事件
      path.on('rotating', function() {
        console.log('rotating');
      });

      //对象被加入监听事件
      path.on('added', function() {
        console.log('added');
      });

      //对象被移除监听事件
      path.on('removed', function() {
        console.log('removed');
      });

      canvas.add(path);
    },
  },
};
</script>

标签：function,Canvas,console,log,canvas,画布,Fabricjs,path,options
来源： https://www.cnblogs.com/badaoliumangqizhi/p/15880220.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。