Question

如果用户绘制画笔笔划like this：

我想要围绕该形状的SVG矢量路径。我正在尝试制作画笔选择工具。

Answer 1

一种方法是使用向量布尔运算（例如：union和difference）来添加和减去向量形状。 Paper.js有Boolean Path Operations（例如 - shape1.unite(shape2)和shape1.subtract(shape2)）。 Paper.js使用<canvas>实现，但可以使用<svg>转换为shape.exportSVG()字符串或DOM元素。

＆＃13;

window.onload = function() {
	paper.setup('canvas_id');

	var svg = document.getElementById('svg_id');
	
	var brushRadius = 10;
	var followMouseCircle = new paper.Path.Circle(new paper.Point(0,0), brushRadius);
	followMouseCircle.strokeColor = 'black';
	followMouseCircle.visible = false;
	followMouseCircle.dashArray = [3,3];
	var brushShape;
	paper.view.onMouseEnter = function(event) {
		followMouseCircle.visible = true;
	};
	paper.view.onMouseMove = function(event) {
		followMouseCircle.position = event.point;
	};
	paper.view.onMouseLeave = function() {
		followMouseCircle.visible = false;
	};
	paper.view.onClick = function() {};
	paper.view.onMouseDown = function(event) {
		var circle = new paper.Path.Circle(event.point, brushRadius);
		if (brushShape) {
			// combine this click shape (circle) with cumulative, previous shapes (brushShape)
			var brushShape_clone = brushShape.clone(); // clone is required to remove previous shapes from <canvas>
			brushShape.remove(); // remove previous brushShape from <canvas>
			brushShape = circle.unite(brushShape_clone);
			circle.remove(); // remove circle from <canvas>
			brushShape_clone.remove(); // remove clone from <canvas>
		} else {
			brushShape = circle;
		}
		brushShape.fillColor   = '#777777';
	};
	paper.view.onMouseDrag = function(event) {
		// make drag shape (roundedRectangle)
		var roundedRectangle = new paper.Path.Rectangle({
			point:  [event.point.x-event.delta.length-brushRadius,event.point.y-brushRadius],
			size:   [event.delta.length+2*brushRadius, 2*brushRadius],
			radius: brushRadius
		});
		roundedRectangle.rotate(event.delta.angle, event.point);

		// combine this drag shape (roundedRectangle) with cumulative, previous drag shapes (brushShape)
		var brushShape_clone = brushShape.clone(); // clone is required to remove previous shapes from <canvas>
		brushShape.remove(); // remove previous brushShape from <canvas>
		brushShape = roundedRectangle.unite(brushShape_clone);
		roundedRectangle.remove(); // remove roundedRectangle from <canvas>
		brushShape_clone.remove(); // remove clone from <canvas>
		brushShape.fillColor = '#777777';

		// brush circle
		followMouseCircle.position = event.point;
		followMouseCircle.bringToFront();

		// svg
		svg.innerHTML = brushShape.exportSVG({asString:true});
	};
	paper.view.onMouseUp = function() {
		brushShape.selected = true;
		
		var simplify = false;
		if (simplify) {
			brushShape.simplify(0);
		}

		// svg
		svg.innerHTML = brushShape.exportSVG({asString:true});
	};

};

＆＃13;

body {
  font-family: monospace;
}
canvas, svg {
  border: dashed 1px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
</head>
<body>
	&lt;canvas id="canvas_id"&gt;<br/>
	<canvas id="canvas_id" width="400" height="120" resize="true"></canvas>
	<br/>
	&lt;/canvas&gt;<br/>
	&lt;svg id="svg_id"&gt;<br/>
	<svg id="svg_id" width="400" height="120" ></svg>
	<br/>
	&lt;/svg&gt;<br/>
</body>
</html>

＆＃13;

围绕画笔选择工具的画笔描边的JavaScript SVG矢量路径

1 个答案: