绘画板 03——选中元素

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

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

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

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

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 针对所有选中元素，应该存在统一数据内，方便批量操作。