fabric.js的介绍就不说了，反正就是一个很强大的canvas库，可以做出画板之类的东西。但官方的文档太简陋了，今天我来记录一下使用的心得。
今天有个需求是这样的：画布上的矩形不能被选中，其他的可以被选中。
在Vue中实现的代码如下：
<template>
<div id="test">
<canvas id="canvas" width="500" height="500" style="border:1px solid #ccc"></canvas>
</div>
</template>
<script>
import { fabric } from 'fabric'
export default {
name: 'test',
data() {
return {
}
},
methods: {
},
mounted() {
var canvas = new fabric.Canvas('canvas',{
perPixelTargetFind: true // 这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择
// skipTargetFind : true // 这一句如果为true的话选中的target将为null
});
canvas.on({
'mouse:down': (o) => {
console.log(o)
}
})
// create a rectangle object
var itext = new fabric.IText('This is a IText object', {
left: 100,
top: 150,
fill: '#D81B60',
strokeWidth: 2,
stroke: "#880E4F",
'borderColor':'#fbb802', // 改变被选中时选框的颜色
'cornerColor':'#fbb802' // 改变被选中时选框的颜色
});
var textbox = new fabric.Textbox('This is a Textbox object', {
left: 20,
top: 50,
fill: '#880E4F',
strokeWidth: 2,
stroke: "#D81B60",
});
var rect = new fabric.Rect({
left: 100,
top: 50,
width: 100,
height: 100,
fill: 'green',
angle: 20,
padding: 10,
evented: false // 这一句让这个rect对象无法被选中
});
canvas.add(itext, textbox, rect);
}
}
</script>
最后的效果如下：绿色的矩形块就无法被选中了
效果.png
