绘画板 03——选中元素

为了针对某个元素进行操作,增加了一个选中操作的按钮。点击此按钮后,鼠标变为手指选择,滑动到元素上方时,元素特殊显示,单击后即为选中状态。

首先,增加一个全局的状态位,判断选择按钮是否被选中

SVG.isPicked = function(){
    return $("#tool_pick").hasClass("active");
}

单击 pick 按钮时,鼠标变为手指

$("#tool_pick").on("click", function(){
    if (SVG.isPicked()) {
        $("#svgPanel").css("cursor","pointer");
    }
});

因为要清空当前drawtool的事件监听,同时也要重置鼠标样式,所以抽离函数resetCurrentDrawTool,在现有handle btn点击时,进行调用

function resetCurrentDrawTool() {
    currentDrawTool && currentDrawTool.stop();
    $("#svgPanel").css("cursor","default");
}

针对选择元素操作,通过监听mouseover、mouseout、click事件,通过样式以及线框宽度标识。 为了方便调用,将此事件绑定,抽象为Element元素的扩展方法

SVG.extend(SVG.Element, {
    pickable: function(enabled) {
        var _ele = this;
        elementList.push(_ele);
        var color = _ele._stroke;
        var width = _ele.attr("stroke-width");
        _ele.on("mouseover", function() {
            if (SVG.isPicked() && !_ele.attr("picked")) {
                _ele.stroke({
                    width: width * 2,
                    color: 'red'
                });
            }
        });
        _ele.on("mouseout", function() {
            if (SVG.isPicked() && !_ele.attr("picked")) {
                _ele.stroke({
                    width: width,
                    color: color
                });
            }
        });
        _ele.on("click", function() {
            if (SVG.isPicked()) {
                if (!_ele.attr("picked")) {
                    _ele.attr("picked", true);
                    _ele.stroke({
                        width: width * 2,
                        color: 'yellow'
                    });
                } else {
                    _ele.attr("picked", null);
                    _ele.stroke({
                        width: width,
                        color: color
                    });
                }
            }
        });
        return this;
    }

});

在DrawTool的具体实现的mouseup方法中,独立判断并执行。以Rect为例,则为

function mouseup(event) {
    drawing = false;
    if (element.attr("width") > 0) {
        element.pickable();
    }
}

首页增加elementList数据,记录所有函数,方便操作。

TODO 选中元素,现在为修改边框颜色,应该修改为其他方式。
TODO 针对所有选中元素,应该存在统一数据内,方便批量操作。

github地址: https://github.com/wangyuheng/painter

DEMO地址: http://painter.crick.wang/