- 实现为所有绘制的图形添加mouseup事件;
- 在mouseup事件中根据元素包围盒的大小及元素偏移量绘制虚线的矩形;
- 并调整元素的展示顺序。
本文中的代码基于zrender实现
function objMouseUp(e){
//选中某个元素之后将移除之前选中元素的标识框
if(boundingRect != undefined){
zr.remove(boundingRect);
}
//获取当前元素的包围盒
var rect = e.getBoundingRect();
//获取当前元素的偏移量
var transform = e.transform;
var transform_x = transform == null ? 0 : transform[4];
var transform_y = transform == null ? 0 : transform[5];
//绘制虚线矩形
boundingRect = new zrender.Rect({
draggable: true,
shape: {
x: rect.x + transform_x-3,
y: rect.y + transform_y-3,
width: rect.width+6,
height: rect.height+6
},