js：基于fabric的图片标注功能

fabric几个坑点

事件绑定

• canvas事件
• 单个对象的事件（如circle、rect）

这里可以看到全部的事件 http://fabricjs.com/events

举例：

// canvas对象的事件绑定
// 可以在这里检测到canvas上所有对象的事件，比如我们鼠标滑到canvas上的一个circle上，那么e.target就是这个circle
canvasObj.on('mouse:over', e => {// do something ...e.target.set('radius', 8)this.canvasObj.renderAll()
})// 单个circle对象的事件绑定
circleObj.on('mouseover', e => {// do something ...// e.target打印出来是没有type属性的，但是其实他继承了对象，所以e.target.type 是 criclee.target.set('radius', 8)this.canvasObj.renderAll()
})

控制对象的显示隐藏

主要是控制对象的 visible 属性

circleObj.visible = false
canvas.renderAll();

如何画一个多边形

const points = [{x: 10,y: 10},{x: 20,y: 10}
]
new fabric.Polygon(points, {stroke: config.color || '#f00',strokeWidth: 2,// 虚线strokeDashArray: [33, 10],// 多边形填充fill: 'rgba(255, 255, 255, 0)',// opacity: 0.3,selectable: false,hasBorders: false,hasControls: false,evented: false,shape: 'polygon',category: config.category
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！