paperjs 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>point Testing</title>
<script type="text/javascript" src="../dist/paper-full.js"></script>
<script type="text/javascript">
paper.install(window);
window.onload = function() {
paper.setup("canvas1");
var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var shape = new Shape.Rectangle(rectangle);
shape.strokeColor = "black";
shape.selected = true;
var point = new Point(100, 100);
var size = new Size(60, 60);
var path = new Path.Rectangle(point, size);
path.strokeColor = "black";
path.curves[0].selected = true;
var tool = new Tool();
var path2;
// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
tool.minDistance = 10;
tool.onMouseDown = function(event) {
// Create a new path every time the mouse is clicked
path2 = new Path();
path2.add(event.point);
path2.strokeColor = "black";
};
tool.onMouseDrag = function(event) {
// Add a point to the path every time the mouse is dragged
path2.add(event.point);
};
var tool2 = new Tool();
var path3;
// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
tool2.minDistance = 50;
tool2.onMouseDown = function(event) {
// Create a new path every time the mouse is clicked
path3 = new Path();
path3.add(event.point);
path3.strokeColor = "black";
};
tool2.onMouseDrag = function(event) {
// Add a point to the path every time the mouse is dragged
path3.add(event.point);
};
tool2.activate();
};
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>
paperjs源码解析
看大致结构，看注释，然后看某块细节
paper
--Base // 基础类
--exportJSON
--toString
Emitter // 订阅发布
--PaperScope //全局的paper作用域
PaperScopeItem
Formatter 格式化
--Point
--Item
--Project
--Path
--Tool
.......
细节举例 看图元属性selected的为true时渲染，画出图元在画出图元的选中描线
// project.js
draw: function(ctx, matrix, pixelRatio) {
// Increase the _updateVersion before the draw-loop. After that, items
// that are visible will have their _updateVersion set to the new value.
this._updateVersion++;
ctx.save();
matrix.applyToContext(ctx);
// Use new Base() so we can use param.extend() to easily override values
var children = this._children,
param = new Base({
offset: new Point(0, 0),
pixelRatio: pixelRatio,
viewMatrix: matrix.isIdentity() ? null : matrix,
matrices: [new Matrix()], // Start with the identity matrix.
// Tell the drawing routine that we want to keep _globalMatrix
// up to date. Item#rasterize() and Raster#getAverageColor()
// should not set this.
updateMatrix: true
});
for (var i = 0, l = children.length; i < l; i++) {
children[i].draw(ctx, param);
}
ctx.restore();
// Draw the selection of the selected items in the project:!!!!!!!!!
if (this._selectionCount > 0) {
ctx.save();
ctx.strokeWidth = 1;
var items = this._selectionItems,
size = this._scope.settings.handleSize,
version = this._updateVersion;
for (var id in items) {
items[id]._drawSelection(ctx, matrix, size, items, version);
}
ctx.restore();
}
}
// item.js
_drawSelection: function(ctx, matrix, size, selectionItems, updateVersion) {
var selection = this._selection,
itemSelected = selection & /*#=*/ItemSelection.ITEM,
boundsSelected = selection & /*#=*/ItemSelection.BOUNDS
|| itemSelected && this._selectBounds,
positionSelected = selection & /*#=*/ItemSelection.POSITION;
if (!this._drawSelected)
itemSelected = false;
if ((itemSelected || boundsSelected || positionSelected)
&& this._isUpdated(updateVersion)) {
// Allow definition of selected color on a per item and per
// layer level, with a fallback to #009dec
var layer,
color = this.getSelectedColor(true) || (layer = this.getLayer())
&& layer.getSelectedColor(true),
mx = matrix.appended(this.getGlobalMatrix(true)),
half = size / 2;
ctx.strokeStyle = ctx.fillStyle = color
? color.toCanvasStyle(ctx) : '#009dec';
if (itemSelected)
this._drawSelected(ctx, mx, selectionItems);
if (positionSelected) {
// Convert position from the parent's coordinates system to the
// global one:
var pos = this.getPosition(true),
parent = this._parent,
point = parent ? parent.localToGlobal(pos) : pos,
x = point.x,
y = point.y;
ctx.beginPath();
ctx.arc(x, y, half, 0, Math.PI * 2, true);
ctx.stroke();
var deltas = [[0, -1], [1, 0], [0, 1], [-1, 0]],
start = half,
end = size + 1;
for (var i = 0; i < 4; i++) {
var delta = deltas[i],
dx = delta[0],
dy = delta[1];
ctx.moveTo(x + dx * start, y + dy * start);
ctx.lineTo(x + dx * end, y + dy * end);
ctx.stroke();
}
}
if (boundsSelected) {
var coords = mx._transformCorners(this.getInternalBounds());
// Now draw a rectangle that connects the transformed
// bounds corners, and draw the corners.
ctx.beginPath();
for (var i = 0; i < 8; i++) {
ctx[!i ? 'moveTo' : 'lineTo'](coords[i], coords[++i]);
}
ctx.closePath();
ctx.stroke();
for (var i = 0; i < 8; i++) {
ctx.fillRect(coords[i] - half, coords[++i] - half,
size, size);
}
}
}
},
// 如果item继承path
// path.js
_drawSelected: function(ctx, matrix) {
ctx.beginPath();
drawSegments(ctx, this, matrix);
// Now stroke it and draw its handles:
ctx.stroke();
drawHandles(ctx, this._segments, matrix, paper.settings.handleSize);
}
