scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement Item#blendMode.

Browse source
This commit is contained in:
Jonathan Puckey 2011-02-25 12:46:45 +01:00
parent d9b75a7232
commit eddbc25171
7 changed files with 131 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/document/Doc.js
View file

@ -33,7 +33,7 @@ Doc = Base.extend({
// this.canvas.width = this.canvas.width might be faster..
this.ctx.clearRect(0, 0, this.size.width + 1, this.size.height);
for (var i = 0, l = this.layers.length; i < l; i++) {
this.layers[i].draw(this.ctx);
this.layers[i].draw(this.ctx, {});
}
}
}

41
src/item/Group.js
View file

@ -11,30 +11,35 @@ Group = Item.extend({
this.clipped = false;
},
draw: function(ctx) {
draw: function(ctx, param) {
if (!this.visible)
return;
// If the group has an opacity of less then 1, draw its children on a
// temporary canvas, and then draw that canvas onto ctx afterwards
// with globalAlpha set.
var tempCanvas, originalCtx;
if (this.opacity < 1) {
var originalCtx = ctx;
tempCanvas = CanvasProvider.getCanvas(this.document.size);
ctx = tempCanvas.getContext('2d');
}
for (var i = 0, l = this.children.length; i < l; i++) {
this.children[i].draw(ctx);
if (this.clipped & i == 0)
ctx.clip();
}
if (tempCanvas) {
originalCtx.save();
originalCtx.globalAlpha = this.opacity;
originalCtx.drawImage(tempCanvas, 0, 0);
originalCtx.restore();
// Return the canvas, so it can be reused
CanvasProvider.returnCanvas(tempCanvas);
if(this.blendMode != 'normal' && !param.ignoreBlendMode) {
BlendMode.process(ctx, this, param);
} else {
param.ignoreBlendMode = false;
if (this.opacity < 1) {
var originalCtx = ctx;
tempCanvas = CanvasProvider.getCanvas(this.document.size);
ctx = tempCanvas.getContext('2d');
}
for (var i = 0, l = this.children.length; i < l; i++) {
this.children[i].draw(ctx, param);
if (this.clipped & i == 0)
ctx.clip();
}
if (tempCanvas) {
originalCtx.save();
originalCtx.globalAlpha = this.opacity;
originalCtx.drawImage(tempCanvas, 0, 0);
originalCtx.restore();
// Return the canvas, so it can be reused
CanvasProvider.returnCanvas(tempCanvas);
}
}
},

15
src/item/Item.js
View file

@ -87,6 +87,20 @@ Item = Base.extend({
opacity: 1,
/**
* The blend mode of the item.
*
* Sample code:
* <code>
* var circle = new Path.Circle(new Point(50, 50), 10);
* print(circle.blendMode); // normal
*
* // Change the blend mode of the path item:
* circle.blendMode = 'multiply';
* </code>
*/
blendMode: 'normal',
/**
* Specifies whether the item is hidden.
*
@ -137,7 +151,6 @@ Item = Base.extend({
}
},
// TODO: getBlendMode / setBlendMode
// TODO: getIsolated / setIsolated (print specific feature)
// TODO: get/setKnockout (print specific feature)
// TODO get/setAlphaIsShape

17
src/item/PlacedSymbol.js
View file

@ -38,12 +38,17 @@ PlacedSymbol = Item.extend({
return this._bounds;
},
draw: function(ctx) {
// TODO: we need to preserve strokewidth, but still transform the fill
ctx.save();
this.matrix.applyToContext(ctx);
this.symbol.definition.draw(ctx);
ctx.restore();
draw: function(ctx, param) {
if(this.blendMode != 'normal' && !param.ignoreBlendMode) {
BlendMode.process(ctx, this, param);
} else {
param.ignoreBlendMode = false;
// TODO: we need to preserve strokewidth, but still transform the fill
ctx.save();
this.matrix.applyToContext(ctx);
this.symbol.definition.draw(ctx);
ctx.restore();
}
}
// TODO:
// embed()

17
src/item/Raster.js
View file

@ -165,12 +165,17 @@ Raster = Item.extend({
return this._bounds;
},
draw: function(ctx) {
ctx.save();
this.matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this.size.width / 2, -this.size.height / 2);
ctx.restore();
draw: function(ctx, param) {
if(this.blendMode != 'normal' && !param.ignoreBlendMode) {
BlendMode.process(ctx, this, param);
} else {
param.ignoreBlendMode = false;
ctx.save();
this.matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this.size.width / 2, -this.size.height / 2);
ctx.restore();
}
}
}, new function() {
function getAverageColor(pixels) {

36
src/path/CompoundPath.js
View file

@ -19,24 +19,30 @@ CompoundPath = PathItem.extend(new function() {
}
},
draw: function(ctx) {
draw: function(ctx, param) {
if(!this.visible)
return;
if (this.children.length) {
var firstChild = this.children[0];
ctx.beginPath();
for (var i = 0, l = this.children.length; i < l; i++) {
var child = this.children[i];
child.draw(ctx, true);
}
firstChild.setCtxStyles(ctx);
if (firstChild.fillColor) {
ctx.fillStyle = firstChild.fillColor.getCssString();
ctx.fill();
}
if (firstChild.strokeColor) {
ctx.strokeStyle = firstChild.strokeColor.getCssString();
ctx.stroke();
if(this.blendMode && !param.ignoreBlendMode) {
BlendMode.process(ctx, this, param);
} else {
var firstChild = this.children[0];
ctx.beginPath();
param.compound = true;
for (var i = 0, l = this.children.length; i < l; i++) {
var child = this.children[i];
child.draw(ctx, param);
}
param.compound = false;
firstChild.setCtxStyles(ctx);
if (firstChild.fillColor) {
ctx.fillStyle = firstChild.fillColor.getCssString();
ctx.fill();
}
if (firstChild.strokeColor) {
ctx.strokeStyle = firstChild.strokeColor.getCssString();
ctx.stroke();
}
}
}
},

94
src/path/Path.js
View file

@ -352,57 +352,63 @@ Path = PathItem.extend({
this.closed = ture;
},
draw: function(ctx, compound) {
draw: function(ctx, param) {
if (!this.visible) return;
if (!compound)
ctx.beginPath();
var segments = this._segments;
var length = segments.length;
for (var i = 0; i < length; i++) {
var segment = segments[i];
var x = segment.point.x;
var y = segment.point.y;
var handleIn = segment.handleIn;
if (i == 0) {
ctx.moveTo(x, y);
} else {
if (handleOut.isZero() && handleIn.isZero()) {
ctx.lineTo(x, y);
if(this.blendMode != 'normal' && !param.ignoreBlendMode) {
BlendMode.process(ctx, this, param);
} else {
param.ignoreBlendMode = false;
if (!param.compound)
ctx.beginPath();
var segments = this._segments;
var length = segments.length;
for (var i = 0; i < length; i++) {
var segment = segments[i];
var x = segment.point.x;
var y = segment.point.y;
var handleIn = segment.handleIn;
if (i == 0) {
ctx.moveTo(x, y);
} else {
ctx.bezierCurveTo(
outX, outY,
handleIn.x + x, handleIn.y + y,
x, y
);
if (handleOut.isZero() && handleIn.isZero()) {
ctx.lineTo(x, y);
} else {
ctx.bezierCurveTo(
outX, outY,
handleIn.x + x, handleIn.y + y,
x, y
);
}
}
var handleOut = segment.handleOut;
var outX = handleOut.x + x;
var outY = handleOut.y + y;
}
var handleOut = segment.handleOut;
var outX = handleOut.x + x;
var outY = handleOut.y + y;
}
if (this.closed && length > 1) {
var segment = segments[0];
var x = segment.point.x;
var y = segment.point.y;
var handleIn = segment.handleIn;
ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y, x, y);
ctx.closePath();
}
if (!compound) {
this.setCtxStyles(ctx);
ctx.save();
ctx.globalAlpha = this.opacity;
if (this.fillColor) {
ctx.fillStyle = this.fillColor.getCanvasStyle(ctx);
ctx.fill();
if (this.closed && length > 1) {
var segment = segments[0];
var x = segment.point.x;
var y = segment.point.y;
var handleIn = segment.handleIn;
ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y, x, y);
ctx.closePath();
}
if (this.strokeColor) {
ctx.strokeStyle = this.strokeColor.getCanvasStyle(ctx);
ctx.stroke();
if (!param.compound) {
this.setCtxStyles(ctx);
ctx.save();
ctx.globalAlpha = this.opacity;
if (this.fillColor) {
ctx.fillStyle = this.fillColor.getCanvasStyle(ctx);
ctx.fill();
}
if (this.strokeColor) {
ctx.strokeStyle = this.strokeColor.getCanvasStyle(ctx);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
}
}, new function() { // inject methods that require scoped privates
/**