绘画板 08——删除与清屏

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

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

删除

GlobalStatus 增加 isRecycle()方法，用来判断删除按钮是否被点击

isRecycle: function(){
	return $("#tool_delete").hasClass("active");
},
​

在 Element 扩展的 click 方法中，增加删除判断，执行 remove()方法。并在 mouseover 时修改鼠标图标显示

(function() {

	SVG.extend(SVG.Doc, {
		transformPoint: function(event) {
			event = event || window.event;
			var touches = event.changedTouches && event.changedTouches[0] || event;
			var node = this.node;
			var point = node.createSVGPoint();
			point.x = touches.pageX - window.scrollX;
			point.y = touches.pageY - window.scrollY;
			var matrix = node.getScreenCTM().inverse();
			return point.matrixTransform(matrix);
		}
	});

	SVG.extend(SVG.Element, {
		pickable: function(enabled) {
			var _ele = this;
			GlobalStatus.pushElements(_ele);
			var color = _ele._stroke;
			var width = _ele.attr("stroke-width");
			_ele.on("mouseover", function() {
				if (GlobalStatus.isPicked()) {
					_ele.stroke({
						width: width * 2,
						color: 'red'
					});
					$("#svgPanel").css("cursor", "pointer");
				} else if (GlobalStatus.isPreFilled()) {
					$("#svgPanel").css("cursor", "url(style/img/cur/tool_fill.cur), auto");
				} else if (GlobalStatus.isRecycle()) {
					$("#svgPanel").css("cursor", "url(style/img/cur/tool_delete.cur), auto");
				}


			});
			_ele.on("mouseout", function() {
				if (GlobalStatus.isPicked()) {
					_ele.stroke({
						width: width,
						color: color
					});
					$("#svgPanel").css("cursor", "default");
				} else if (GlobalStatus.isPreFilled()) {
					$("#svgPanel").css("cursor", "default");
				} else if (GlobalStatus.isRecycle()) {
					$("#svgPanel").css("cursor", "default");
				}

			});
			_ele.on("click", function() {
				if (GlobalStatus.isPreFilled()) {
					if ($("#fill_color").hasClass("active")) {
						_ele.fill(GlobalStatus.getFillColor());
						_ele.style("fill-opacity", GlobalStatus.getFillOpacity());
					} else {
						_ele.style("stroke", GlobalStatus.getFontColor());
					}

				} else if (GlobalStatus.isPicked()) {
					if (!_ele.attr("picked")) {
						_ele.attr("picked", true);
						_ele.handleBorder = _ele.handleBorder || new HandleBorder(svgDoc);
						_ele.handleBorder.showShade(_ele);
						GlobalStatus.pushPicked(_ele);
					} else {
						_ele.attr("picked", null);
						_ele.handleBorder && _ele.handleBorder.hideShade(_ele);
						GlobalStatus.removePicked(_ele);
					}
				} else if (GlobalStatus.isRecycle()) {
					_ele.remove();
				}
			});
			return this;
		}

	});
})();
​

清屏

单击清屏按钮时，清空所有的 element 元素，不需要按钮被点击状态。

此时有一个思考，是遍历所有的元素执行删除操作，还是重新设置 svg doc。

先用遍历方法执行。

将 elementList 抽象到 GlobalStatus 方法中管理，并在元素完成后执行添加操作。

elementList : [],
pushElements: function(o){
	return this.elementList.push(o);
},
removeElements: function(o) {
	return this.elementList.remove(o);
},
getAllElements: function(){
	return this.elementList;
}
​

监听清屏按钮，遍历删除 element

    $("#clear_all").on("click", function() {
        $(GlobalStatus.getAllElements()).each(function(){
            this.remove();
        });
    });
​