lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 09:48:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

changed shadowFillStroke() to applyStyles(). Took applyLineJoin() out of shape draw functions and moved it to the Shape._draw() method.

Browse Source
This commit is contained in:
Eric Rowell 2012-05-09 22:31:55 -07:00
parent 2993191fe6
commit 28f7fc246d
12 changed files with 41 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
dist/kinetic-core.js vendored
View File

@ -2491,10 +2491,9 @@ Kinetic.Shape.prototype = {
} }
}, },
/** /**
* convenience method that both fills and strokes * applies shadows, fills, and styles
* the shape
*/ */
shadowFillStroke: function() { applyStyles: function() {
var context = this.getContext(); var context = this.getContext();
/* /*
* if fill is defined, apply shadow to * if fill is defined, apply shadow to
@ -2755,11 +2754,17 @@ Kinetic.Shape.prototype = {
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
} }
this.tempLayer = layer;
/*
* pre styles include alpha, linejoin, and line cap
*/
if(this.getAbsoluteAlpha() !== 1) { if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha(); context.globalAlpha = this.getAbsoluteAlpha();
} }
this.applyLineJoin();
this.tempLayer = layer; // draw the shape
this.drawFunc.call(this); this.drawFunc.call(this);
context.restore(); context.restore();
} }
@ -2789,7 +2794,6 @@ Kinetic.Rect = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
if(this.attrs.cornerRadius === 0) { if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff. // simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height); context.rect(0, 0, this.attrs.width, this.attrs.height);
@ -2807,7 +2811,7 @@ Kinetic.Rect = function(config) {
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -2898,10 +2902,9 @@ Kinetic.Circle = function(config) {
var canvas = this.getCanvas(); var canvas = this.getCanvas();
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true); context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -2960,10 +2963,9 @@ Kinetic.Image = function(config) {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.rect(0, 0, width, height); context.rect(0, 0, width, height);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
// if cropping // if cropping
if(cropWidth !== undefined && cropHeight !== undefined) { if(cropWidth !== undefined && cropHeight !== undefined) {
@ -3172,13 +3174,12 @@ Kinetic.Polygon = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y); context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
for(var n = 1; n < this.attrs.points.length; n++) { for(var n = 1; n < this.attrs.points.length; n++) {
context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y); context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -3224,7 +3225,6 @@ Kinetic.RegularPolygon = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.radius); context.moveTo(0, 0 - this.attrs.radius);
for(var n = 1; n < this.attrs.sides; n++) { for(var n = 1; n < this.attrs.sides; n++) {
@ -3233,7 +3233,7 @@ Kinetic.RegularPolygon = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -3293,8 +3293,6 @@ Kinetic.Star = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.outerRadius); context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.attrs.numPoints * 2; n++) { for(var n = 1; n < this.attrs.numPoints * 2; n++) {
@ -3304,7 +3302,7 @@ Kinetic.Star = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -3412,10 +3410,9 @@ Kinetic.Text = function(config) {
// draw path // draw path
context.save(); context.save();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.rect(x, y, textWidth + p * 2, textHeight + p * 2); context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
context.restore(); context.restore();
var tx = p + x; var tx = p + x;
@ -3627,7 +3624,6 @@ Kinetic.Line = function(config) {
var context = this.getContext(); var context = this.getContext();
var lastPos = {}; var lastPos = {};
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y); context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
@ -3649,8 +3645,7 @@ Kinetic.Line = function(config) {
if(!!this.attrs.lineCap) { if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap; context.lineCap = this.attrs.lineCap;
} }
this.applyShadow(); this.applyStyles();
this.stroke();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
src/Shape.js
View File

@ -72,10 +72,9 @@ Kinetic.Shape.prototype = {
} }
}, },
/** /**
* convenience method that both fills and strokes * applies shadows, fills, and styles
* the shape
*/ */
shadowFillStroke: function() { applyStyles: function() {
var context = this.getContext(); var context = this.getContext();
/* /*
* if fill is defined, apply shadow to * if fill is defined, apply shadow to
@ -336,11 +335,17 @@ Kinetic.Shape.prototype = {
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
} }
this.tempLayer = layer;
/*
* pre styles include alpha, linejoin, and line cap
*/
if(this.getAbsoluteAlpha() !== 1) { if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha(); context.globalAlpha = this.getAbsoluteAlpha();
} }
this.applyLineJoin();
this.tempLayer = layer; // draw the shape
this.drawFunc.call(this); this.drawFunc.call(this);
context.restore(); context.restore();
} }

3
src/shapes/Circle.js
View File

@ -18,10 +18,9 @@ Kinetic.Circle = function(config) {
var canvas = this.getCanvas(); var canvas = this.getCanvas();
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true); context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

3
src/shapes/Image.js
View File

@ -30,10 +30,9 @@ Kinetic.Image = function(config) {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.rect(0, 0, width, height); context.rect(0, 0, width, height);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
// if cropping // if cropping
if(cropWidth !== undefined && cropHeight !== undefined) { if(cropWidth !== undefined && cropHeight !== undefined) {

4
src/shapes/Line.js
View File

@ -19,7 +19,6 @@ Kinetic.Line = function(config) {
var context = this.getContext(); var context = this.getContext();
var lastPos = {}; var lastPos = {};
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y); context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
@ -41,8 +40,7 @@ Kinetic.Line = function(config) {
if(!!this.attrs.lineCap) { if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap; context.lineCap = this.attrs.lineCap;
} }
this.applyShadow(); this.applyStyles();
this.stroke();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

3
src/shapes/Polygon.js
View File

@ -16,13 +16,12 @@ Kinetic.Polygon = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y); context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
for(var n = 1; n < this.attrs.points.length; n++) { for(var n = 1; n < this.attrs.points.length; n++) {
context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y); context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

3
src/shapes/Rect.js
View File

@ -19,7 +19,6 @@ Kinetic.Rect = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
if(this.attrs.cornerRadius === 0) { if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff. // simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height); context.rect(0, 0, this.attrs.width, this.attrs.height);
@ -37,7 +36,7 @@ Kinetic.Rect = function(config) {
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

3
src/shapes/RegularPolygon.js
View File

@ -17,7 +17,6 @@ Kinetic.RegularPolygon = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.radius); context.moveTo(0, 0 - this.attrs.radius);
for(var n = 1; n < this.attrs.sides; n++) { for(var n = 1; n < this.attrs.sides; n++) {
@ -26,7 +25,7 @@ Kinetic.RegularPolygon = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

4
src/shapes/Star.js
View File

@ -18,8 +18,6 @@ Kinetic.Star = function(config) {
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.outerRadius); context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.attrs.numPoints * 2; n++) { for(var n = 1; n < this.attrs.numPoints * 2; n++) {
@ -29,7 +27,7 @@ Kinetic.Star = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

3
src/shapes/Text.js
View File

@ -54,10 +54,9 @@ Kinetic.Text = function(config) {
// draw path // draw path
context.save(); context.save();
context.beginPath(); context.beginPath();
this.applyLineJoin();
context.rect(x, y, textWidth + p * 2, textHeight + p * 2); context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
context.restore(); context.restore();
var tx = p + x; var tx = p + x;

10
tests/js/unitTests.js
View File

@ -293,7 +293,7 @@ Test.prototype.tests = {
context.lineTo(420, 80); context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170); context.quadraticCurveTo(300, 100, 260, 170);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
var triangle = new Kinetic.Shape({ var triangle = new Kinetic.Shape({
drawFunc: drawTriangle, drawFunc: drawTriangle,
@ -325,7 +325,7 @@ Test.prototype.tests = {
context.lineTo(420, 80); context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170); context.quadraticCurveTo(300, 100, 260, 170);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}; };
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}'; var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json); stage.load(json);
@ -1548,7 +1548,7 @@ Test.prototype.tests = {
context.lineTo(100, 0); context.lineTo(100, 0);
context.lineTo(100, 100); context.lineTo(100, 100);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}, },
x: 200, x: 200,
y: 100, y: 100,
@ -1575,7 +1575,7 @@ Test.prototype.tests = {
context.lineTo(100, 0); context.lineTo(100, 0);
context.lineTo(100, 100); context.lineTo(100, 100);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}, },
x: 200, x: 200,
y: 100, y: 100,
@ -1591,7 +1591,7 @@ Test.prototype.tests = {
context.lineTo(200, 0); context.lineTo(200, 0);
context.lineTo(200, 100); context.lineTo(200, 100);
context.closePath(); context.closePath();
this.shadowFillStroke(); this.applyStyles();
}); });
layer.add(shape); layer.add(shape);