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

moved line cap logic to shape level so that Path can also utilize line caps

Browse Source
This commit is contained in:
ericdrowell 2012-10-06 15:05:03 -07:00
parent 6f230fc42b
commit a3840fdc69
5 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dist/kinetic-core.js vendored
View File

@ -4067,10 +4067,16 @@ Kinetic.Shape.prototype = {
this.drawImage.apply(this, a);
}
},
applyOpacity: function(context) {
var absOpacity = this.getAbsoluteOpacity();
if(absOpacity !== 1) {
context.globalAlpha = absOpacity;
}
},
/**
* helper method to set the line join of a shape
* based on the lineJoin property
* @name applyLineJoin
* based on the applyLineJoin property
* @name lineJoin
* @methodOf Kinetic.Shape.prototype
*/
applyLineJoin: function(context) {
@ -4078,6 +4084,17 @@ Kinetic.Shape.prototype = {
context.lineJoin = this.attrs.lineJoin;
}
},
/**
* helper method to set the line cap of a path
* based on the lineCap property
* @name applyLineCap
* @methodOf Kinetic.Shape.prototype
*/
applyLineCap: function(context) {
if(this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
},
/**
* set shadow object
* @name setShadow
@ -4191,7 +4208,7 @@ Kinetic.Shape.prototype = {
return p[3] > 0;
},
remove: function() {
Kinetic.Node.prototype.remove.call(this);
Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
@ -4215,14 +4232,9 @@ Kinetic.Shape.prototype = {
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
/*
* pre styles include opacity, linejoin
*/
var absOpacity = this.getAbsoluteOpacity();
if(absOpacity !== 1) {
context.globalAlpha = absOpacity;
}
this.applyOpacity(context);
this.applyLineJoin(context);
this.applyLineCap(context);
// draw the shape
this.appliedShadow = false;
@ -5278,10 +5290,6 @@ Kinetic.Line.prototype = {
}
}
if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
this.stroke(context);
},
/**

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

File diff suppressed because one or more lines are too long

32
src/Shape.js
View File

@ -299,10 +299,16 @@ Kinetic.Shape.prototype = {
this.drawImage.apply(this, a);
}
},
applyOpacity: function(context) {
var absOpacity = this.getAbsoluteOpacity();
if(absOpacity !== 1) {
context.globalAlpha = absOpacity;
}
},
/**
* helper method to set the line join of a shape
* based on the lineJoin property
* @name applyLineJoin
* based on the applyLineJoin property
* @name lineJoin
* @methodOf Kinetic.Shape.prototype
*/
applyLineJoin: function(context) {
@ -310,6 +316,17 @@ Kinetic.Shape.prototype = {
context.lineJoin = this.attrs.lineJoin;
}
},
/**
* helper method to set the line cap of a path
* based on the lineCap property
* @name applyLineCap
* @methodOf Kinetic.Shape.prototype
*/
applyLineCap: function(context) {
if(this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
},
/**
* set shadow object
* @name setShadow
@ -423,7 +440,7 @@ Kinetic.Shape.prototype = {
return p[3] > 0;
},
remove: function() {
Kinetic.Node.prototype.remove.call(this);
Kinetic.Node.prototype.remove.call(this);
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
@ -447,14 +464,9 @@ Kinetic.Shape.prototype = {
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
/*
* pre styles include opacity, linejoin
*/
var absOpacity = this.getAbsoluteOpacity();
if(absOpacity !== 1) {
context.globalAlpha = absOpacity;
}
this.applyOpacity(context);
this.applyLineJoin(context);
this.applyLineCap(context);
// draw the shape
this.appliedShadow = false;

4
src/shapes/Line.js
View File

@ -46,10 +46,6 @@ Kinetic.Line.prototype = {
}
}
if(!!this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
this.stroke(context);
},
/**

36
tests/js/unitTests.js
View File

@ -2020,7 +2020,8 @@ Test.prototype.tests = {
var line = new Kinetic.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 5,
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
@ -2029,7 +2030,8 @@ Test.prototype.tests = {
color: '#aaa',
blur: 10,
offset: [20, 20]
}
},
opacity: 0.2
});
layer.add(line);
@ -2760,7 +2762,7 @@ Test.prototype.tests = {
});
*/
},
'SHAPE - text multi line with shadows': function(containerId) {
'*SHAPE - text multi line with shadows': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2788,7 +2790,7 @@ Test.prototype.tests = {
color: 'black',
blur: 1,
offset: [10, 10],
opacity: 0.2
opacity: 0.5
},
cornerRadius: 10,
draggable: true,
@ -5008,6 +5010,32 @@ Test.prototype.tests = {
path.setData('M200,100h100v50z');
},
'PATH - add path with line cap and line join': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
scale: 0.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var path = new Kinetic.Path({
data: 'M200,100h100v50',
stroke: '#333',
strokeWidth: 20,
draggable: true,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(path);
stage.add(layer);
},
'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
var stage = new Kinetic.Stage({