标注的矩形框或者多边形框展示删除按钮;
官网有一个例子
我原本想着按照他这个思路,很简单的;
可是当我在使用的过程中,遇到了一些问题,多变想不展示删除按钮;并且如果之前有矩形,无法渲然删除按钮,只有新增加的可以有删除按钮;所以我就换了一种方案:使用文本;
需求:鼠标滑入图形的时候展示删除按钮;滑走的时候隐藏删除按钮;
props.showDeleteControl 字段代表是否展示删除按钮;
drawText方法如下:
// 文本
const drawText = (text: string, shape: any, textOthers?: OthersConfigModel) => {
return new fabric.Text(text, {
type: DrawType.Text,
left: shape.left + shape.width,
// top: shape.top + ((textOthers && textOthers.topToRect) ?? -20),
top: shape.top - 20,
selectable: false,
fill: 'red',
...textOthers
});
};
// 添加删除按钮
const addDeleteControl = (object: any) => {
if (props.showDeleteControl) {
// 创建删除按钮对象
const deleteBtn = drawText('X', object, {
// 有shapeId 待表是之前的 默认隐藏删除按钮; 如果是新画的 则默认显示删除按钮
visible: object.shapeId ? false : true
});
// 添加鼠标进入事件处理程序
object.on('mouseover', function () {
// 隐藏其他的删除按钮
hiddenDeleteControl();
canvas.value.setActiveObject(object); // 设置为当前活跃
deleteBtn.visible = true;
canvas.value.renderAll();
});
object.on('mousemove', function () {
deleteBtn.set({
left: object.left + object.width,
top: object.top - 20
});
// 手动更新删除按钮的选中位置 !!!!非常重要
deleteBtn.setCoords();
});
// 添加点击事件处理程序
deleteBtn.on('mousedown', function () {
console.log('mousedown');
});
canvas.value?.add(deleteBtn);
}
};
过程中遇到的一个问题是:我移动了矩形,但是删除按钮不可选中,起初认为是不可选中,最后才知道是选中位置没更新!!!所以需要手动更新删除按钮的选中位置;
deleteBtn.setCoords();
上面的思路主要是 每个图形附近增加一个删除按钮;虽然你页面上看到的图形只有1个。但是canvas中渲染的有两个;
也可以通过图片来替代删除文本
// 创建删除按钮图标
fabric.Image.fromURL(deleteIcon, deleteBtn => {
deleteBtn.set({
left: object.left + object.width - 20,
top: object.top - 50,
selectable: false,
visible: false,
hasControls: false, // 隐藏控制点
hasBorders: false // 隐藏边框
});
// 缩放图片到指定宽度
deleteBtn.scaleToWidth(30);
// 添加点击事件处理程序
deleteBtn.on('mousedown', function () {
console.log('mousedown');
});
canvas.value.add(deleteBtn);
// // 添加鼠标进入事件处理程序
object.on('mouseover', () => {
// 隐藏其他的删除按钮
hiddenDeleteControl();
canvas.value.setActiveObject(object); // 设置为当前活跃
deleteBtn.visible = true;
canvas.value.renderAll();
});
object.on('mousemove', () => {
deleteBtn.set({
left: object.left + object.width,
top: object.top - 20
});
// 手动更新删除按钮的选中位置 !!!!非常重要
deleteBtn.setCoords();
});
});
但这种方式更会增加图形的渲染, 1个图形会多渲染2个图形;