scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Speed up drawing of selected items.

Browse source
This commit is contained in:
Jonathan Puckey 2011-04-21 15:48:21 +02:00
parent 517793c48a
commit 732caec7bf
4 changed files with 42 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/document/Document.js
View file

@ -57,17 +57,6 @@ var Document = this.Document = Base.extend({
return false;
},
getSelectionContext: function(param) {
var context = this._selectionContext;
if (!context) {
var canvas = CanvasProvider.getCanvas(this.size);
context = this._selectionContext = canvas.getContext('2d');
context.strokeWidth = 1;
}
context.strokeStyle = context.fillStyle = param.layerColor;
return context;
},
draw: function() {
if (this.canvas) {
// Initial tests conclude that clearing the canvas using clearRect
@ -77,21 +66,20 @@ var Document = this.Document = Base.extend({
this.size.width + 1, this.size.height + 1);
this.context.save();
var param = { offset: new Point(0, 0) };
for (var i = 0, l = this.layers.length; i < l; i++) {
// TODO: use Layer#color:
param.layerColor = '#4f7aff';
for (var i = 0, l = this.layers.length; i < l; i++)
Item.draw(this.layers[i], this.context, param);
}
this.context.restore();
// If, during drawing, one of the paths was selected, there will
// be a selectionContext which needs to be composited onto the
// canvas:
if (this._selectionContext) {
var canvas = this._selectionContext.canvas;
this.context.drawImage(canvas, 0, 0);
CanvasProvider.returnCanvas(canvas);
this._selectionContext = null;
// Draw the selection of the selected items in the document:
var selectedItems = this._selectedItems,
length = selectedItems.length;
if (length) {
this.context.strokeWidth = 1;
// Todo: use Layer#color
this.context.strokeStyle = this.context.fillStyle = '#4f7aff';
param = { selection: true };
for (var i = 0; i < length; i++)
selectedItems[i].draw(this.context, param);
}
}
},

13
src/item/PlacedSymbol.js
View file

@ -53,13 +53,14 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend({
},
draw: function(ctx, param) {
ctx.save();
this.matrix.applyToContext(ctx);
Item.draw(this.symbol.getDefinition(), ctx, param);
ctx.restore();
if (this.getSelected()) {
if (param.selection) {
Item.drawSelectedBounds(this.symbol._definition.getStrokeBounds(),
this.document.getSelectionContext(param), this.matrix);
ctx, this.matrix);
} else {
ctx.save();
this.matrix.applyToContext(ctx);
Item.draw(this.symbol.getDefinition(), ctx, param);
ctx.restore();
}
}

16
src/item/Raster.js
View file

@ -202,15 +202,15 @@ var Raster = this.Raster = Item.extend({
},
draw: function(ctx, param) {
ctx.save();
this.matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2);
ctx.restore();
if (this.getSelected()) {
if (param.selection) {
var bounds = new Rectangle(this._size).setCenter(0, 0);
Item.drawSelectedBounds(bounds,
this.document.getSelectionContext(param), this.matrix);
Item.drawSelectedBounds(bounds, ctx, this.matrix);
} else {
ctx.save();
this.matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2);
ctx.restore();
}
}
}, new function() {

38
src/path/Path.js
View file

@ -297,8 +297,8 @@ var Path = this.Path = PathItem.extend({
for (var i = 0; i < length; i++) {
var segment = segments[i],
point = segment._point,
x = point.x,
y = point.y,
x = point._x,
y = point._y,
handleIn = segment._handleIn;
if (i == 0) {
ctx.moveTo(x, y);
@ -308,34 +308,34 @@ var Path = this.Path = PathItem.extend({
} else {
ctx.bezierCurveTo(
outX, outY,
handleIn.x + x, handleIn.y + y,
handleIn._x + x, handleIn._y + y,
x, y
);
}
}
handleOut = segment._handleOut;
outX = handleOut.x + x;
outY = handleOut.y + y;
outX = handleOut._x + x;
outY = handleOut._y + y;
}
if (this.closed && length > 1) {
var segment = segments[0],
point = segment._point,
x = point.x,
y = point.y,
x = point._x,
y = point._y,
handleIn = segment._handleIn;
ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y, x, y);
ctx.bezierCurveTo(outX, outY, handleIn._x + x, handleIn._y + y, x, y);
ctx.closePath();
}
// If the path is part of a compound path or doesn't have a fill or
// stroke, there is no need to continue.
var fillColor = this.getFillColor(),
strokeColor = this.getStrokeColor();
// If we are drawing onto the selection canvas, stroke the
// path and draw its handles.
// If we are drawing the selection of a path, stroke it and draw
// its handles:
if (param.selection) {
ctx.stroke();
drawHandles(ctx, this.segments);
drawHandles(ctx, this._segments);
} else {
// If the path is part of a compound path or doesn't have a fill or
// stroke, there is no need to continue.
var fillColor = this.getFillColor(),
strokeColor = this.getStrokeColor();
if (!param.compound && (fillColor || strokeColor)) {
this.setContextStyles(ctx);
ctx.save();
@ -354,14 +354,6 @@ var Path = this.Path = PathItem.extend({
}
ctx.restore();
}
// If the path is selected, draw it again on the separate
// selection canvas, which will be composited onto the canvas
// after drawing of the document is complete.
if (this.getSelected()) {
param.selection = true;
this.draw(this.document.getSelectionContext(param), param);
param.selection = false;
}
}
}
};