场景

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

Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

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

注：

博客：
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>

Fabricjs对Canvas画布和对象的事件监听相关推荐

html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
java中事件监听_Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
java抽象机制_Java很好学:接口+抽象类+事件监听机制
接口?抽象类? 首先知道知道下接口.抽象类的概念接口:只含有常量和抽象方法(只有方法名和参数不含方法体的方法) 抽象类:可以定义常量和抽象方法(和接口一样),还可以定义变量和普通方法和构造方法(和一 ...
Java 创建事件Event、事件监听EventListener、事件发布publishEvent
一.概述个人认为,事件机制一般可由:事件源source,事件对象Event,事件监听EventListener,事件发布publishEvent组成事件源:引起事件发生的源: User用户信息, ...
雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
html怎么给没张图片添加单击事件,如何在Canvas上的图形/图像绑定事件监听的实现...
HTML中只能为元素/标签绑定监听函数: Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定. 解决办法:"事件委托"--让canvas ...
ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听
官网示例地址:ol-ext 代码地址: ol-ext: openlayers开源插件库文档api:查看OpenLayers - Welcome 简单功能示例自己项目中用到的是等比例缩放,旋转, ...
Java学习——复习第八天 Swing程序设计、AWT绘图、事件监听
16.Swing程序设计 1.Swing概述--Swing主要用来开发GUI程序,GUI即图形图像界面,他是应用程序提供给用户操作的图形界面,包括窗口.菜单.按钮等元素. 1.1Swing的特点--允 ...

Fabricjs对Canvas画布和对象的事件监听

场景

实现

Fabricjs对Canvas画布和对象的事件监听相关推荐

最新文章

热门文章