lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 05:01:41 +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
* the shape
* applies shadows, fills, and styles
*/
shadowFillStroke: function() {
applyStyles: function() {
var context = this.getContext();
/*
* 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]);
}
this.tempLayer = layer;
/*
* pre styles include alpha, linejoin, and line cap
*/
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();
}
this.applyLineJoin();
this.tempLayer = layer;
// draw the shape
this.drawFunc.call(this);
context.restore();
}
@ -2789,7 +2794,6 @@ Kinetic.Rect = function(config) {
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
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.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -2898,10 +2902,9 @@ Kinetic.Circle = function(config) {
var canvas = this.getCanvas();
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -2960,10 +2963,9 @@ Kinetic.Image = function(config) {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.rect(0, 0, width, height);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
// if cropping
if(cropWidth !== undefined && cropHeight !== undefined) {
@ -3172,13 +3174,12 @@ Kinetic.Polygon = function(config) {
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
for(var n = 1; n < this.attrs.points.length; n++) {
context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
}
context.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -3224,7 +3225,6 @@ Kinetic.RegularPolygon = function(config) {
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.radius);
for(var n = 1; n < this.attrs.sides; n++) {
@ -3233,7 +3233,7 @@ Kinetic.RegularPolygon = function(config) {
context.lineTo(x, y);
}
context.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -3293,8 +3293,6 @@ Kinetic.Star = function(config) {
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.attrs.numPoints * 2; n++) {
@ -3304,7 +3302,7 @@ Kinetic.Star = function(config) {
context.lineTo(x, y);
}
context.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -3412,10 +3410,9 @@ Kinetic.Text = function(config) {
// draw path
context.save();
context.beginPath();
this.applyLineJoin();
context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
context.restore();
var tx = p + x;
@ -3627,7 +3624,6 @@ Kinetic.Line = function(config) {
var context = this.getContext();
var lastPos = {};
context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
@ -3649,8 +3645,7 @@ Kinetic.Line = function(config) {
if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
this.applyShadow();
this.stroke();
this.applyStyles();
};
// call super constructor
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
* the shape
* applies shadows, fills, and styles
*/
shadowFillStroke: function() {
applyStyles: function() {
var context = this.getContext();
/*
* 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]);
}
this.tempLayer = layer;
/*
* pre styles include alpha, linejoin, and line cap
*/
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();
}
this.applyLineJoin();
this.tempLayer = layer;
// draw the shape
this.drawFunc.call(this);
context.restore();
}

3
src/shapes/Circle.js
View File

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

3
src/shapes/Image.js
View File

@ -30,10 +30,9 @@ Kinetic.Image = function(config) {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.rect(0, 0, width, height);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
// if cropping
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 lastPos = {};
context.beginPath();
this.applyLineJoin();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
@ -41,8 +40,7 @@ Kinetic.Line = function(config) {
if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
this.applyShadow();
this.stroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);

3
src/shapes/Polygon.js
View File

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

3
src/shapes/Rect.js
View File

@ -19,7 +19,6 @@ Kinetic.Rect = function(config) {
config.drawFunc = function() {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
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.closePath();
this.shadowFillStroke();
this.applyStyles();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);

3
src/shapes/RegularPolygon.js
View File

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

4
src/shapes/Star.js
View File

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

3
src/shapes/Text.js
View File

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

10
tests/js/unitTests.js
View File

@ -293,7 +293,7 @@ Test.prototype.tests = {
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@ -325,7 +325,7 @@ Test.prototype.tests = {
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
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"}]}]}]}';
stage.load(json);
@ -1548,7 +1548,7 @@ Test.prototype.tests = {
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
},
x: 200,
y: 100,
@ -1575,7 +1575,7 @@ Test.prototype.tests = {
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
},
x: 200,
y: 100,
@ -1591,7 +1591,7 @@ Test.prototype.tests = {
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.shadowFillStroke();
this.applyStyles();
});
layer.add(shape);