canvas中使用虚线框包围选中所绘图形

 

1. 实现为所有绘制的图形添加mouseup事件；
2. 在mouseup事件中根据元素包围盒的大小及元素偏移量绘制虚线的矩形；
3. 并调整元素的展示顺序。

本文中的代码基于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
        },
        style: {
            fill: "rgba(255,255,255,0)",
            stroke: "rgba(0,0,0,1)",
            lineWidth: 1,
            lineDash:[3]
        }
    });
    zr.add(boundingRect);
    //修改元素的前后顺序，避免矩形将选中的元素覆盖导致元素无法移动的情况
    e.attr({
        z:boundingRect.z+1
    });
}