mirror of
https://github.com/konvajs/konva.git
synced 2025-07-15 10:12:44 +08:00
moved line cap logic to shape level so that Path can also utilize line caps
This commit is contained in:
parent
6f230fc42b
commit
a3840fdc69
36
dist/kinetic-core.js
vendored
36
dist/kinetic-core.js
vendored
@ -4067,10 +4067,16 @@ Kinetic.Shape.prototype = {
|
|||||||
this.drawImage.apply(this, a);
|
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
|
* helper method to set the line join of a shape
|
||||||
* based on the lineJoin property
|
* based on the applyLineJoin property
|
||||||
* @name applyLineJoin
|
* @name lineJoin
|
||||||
* @methodOf Kinetic.Shape.prototype
|
* @methodOf Kinetic.Shape.prototype
|
||||||
*/
|
*/
|
||||||
applyLineJoin: function(context) {
|
applyLineJoin: function(context) {
|
||||||
@ -4078,6 +4084,17 @@ Kinetic.Shape.prototype = {
|
|||||||
context.lineJoin = this.attrs.lineJoin;
|
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
|
* set shadow object
|
||||||
* @name setShadow
|
* @name setShadow
|
||||||
@ -4191,7 +4208,7 @@ Kinetic.Shape.prototype = {
|
|||||||
return p[3] > 0;
|
return p[3] > 0;
|
||||||
},
|
},
|
||||||
remove: function() {
|
remove: function() {
|
||||||
Kinetic.Node.prototype.remove.call(this);
|
Kinetic.Node.prototype.remove.call(this);
|
||||||
delete Kinetic.Global.shapes[this.colorKey];
|
delete Kinetic.Global.shapes[this.colorKey];
|
||||||
},
|
},
|
||||||
__draw: function(canvas) {
|
__draw: function(canvas) {
|
||||||
@ -4215,14 +4232,9 @@ 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.applyOpacity(context);
|
||||||
* pre styles include opacity, linejoin
|
|
||||||
*/
|
|
||||||
var absOpacity = this.getAbsoluteOpacity();
|
|
||||||
if(absOpacity !== 1) {
|
|
||||||
context.globalAlpha = absOpacity;
|
|
||||||
}
|
|
||||||
this.applyLineJoin(context);
|
this.applyLineJoin(context);
|
||||||
|
this.applyLineCap(context);
|
||||||
|
|
||||||
// draw the shape
|
// draw the shape
|
||||||
this.appliedShadow = false;
|
this.appliedShadow = false;
|
||||||
@ -5278,10 +5290,6 @@ Kinetic.Line.prototype = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!!this.attrs.lineCap) {
|
|
||||||
context.lineCap = this.attrs.lineCap;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.stroke(context);
|
this.stroke(context);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
32
src/Shape.js
32
src/Shape.js
@ -299,10 +299,16 @@ Kinetic.Shape.prototype = {
|
|||||||
this.drawImage.apply(this, a);
|
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
|
* helper method to set the line join of a shape
|
||||||
* based on the lineJoin property
|
* based on the applyLineJoin property
|
||||||
* @name applyLineJoin
|
* @name lineJoin
|
||||||
* @methodOf Kinetic.Shape.prototype
|
* @methodOf Kinetic.Shape.prototype
|
||||||
*/
|
*/
|
||||||
applyLineJoin: function(context) {
|
applyLineJoin: function(context) {
|
||||||
@ -310,6 +316,17 @@ Kinetic.Shape.prototype = {
|
|||||||
context.lineJoin = this.attrs.lineJoin;
|
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
|
* set shadow object
|
||||||
* @name setShadow
|
* @name setShadow
|
||||||
@ -423,7 +440,7 @@ Kinetic.Shape.prototype = {
|
|||||||
return p[3] > 0;
|
return p[3] > 0;
|
||||||
},
|
},
|
||||||
remove: function() {
|
remove: function() {
|
||||||
Kinetic.Node.prototype.remove.call(this);
|
Kinetic.Node.prototype.remove.call(this);
|
||||||
delete Kinetic.Global.shapes[this.colorKey];
|
delete Kinetic.Global.shapes[this.colorKey];
|
||||||
},
|
},
|
||||||
__draw: function(canvas) {
|
__draw: function(canvas) {
|
||||||
@ -447,14 +464,9 @@ 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.applyOpacity(context);
|
||||||
* pre styles include opacity, linejoin
|
|
||||||
*/
|
|
||||||
var absOpacity = this.getAbsoluteOpacity();
|
|
||||||
if(absOpacity !== 1) {
|
|
||||||
context.globalAlpha = absOpacity;
|
|
||||||
}
|
|
||||||
this.applyLineJoin(context);
|
this.applyLineJoin(context);
|
||||||
|
this.applyLineCap(context);
|
||||||
|
|
||||||
// draw the shape
|
// draw the shape
|
||||||
this.appliedShadow = false;
|
this.appliedShadow = false;
|
||||||
|
@ -46,10 +46,6 @@ Kinetic.Line.prototype = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!!this.attrs.lineCap) {
|
|
||||||
context.lineCap = this.attrs.lineCap;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.stroke(context);
|
this.stroke(context);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
@ -2020,7 +2020,8 @@ Test.prototype.tests = {
|
|||||||
var line = new Kinetic.Line({
|
var line = new Kinetic.Line({
|
||||||
points: [73, 160, 340, 23, 500, 109, 500, 180],
|
points: [73, 160, 340, 23, 500, 109, 500, 180],
|
||||||
stroke: 'blue',
|
stroke: 'blue',
|
||||||
strokeWidth: 5,
|
|
||||||
|
strokeWidth: 10,
|
||||||
lineCap: 'round',
|
lineCap: 'round',
|
||||||
lineJoin: 'round',
|
lineJoin: 'round',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
@ -2029,7 +2030,8 @@ Test.prototype.tests = {
|
|||||||
color: '#aaa',
|
color: '#aaa',
|
||||||
blur: 10,
|
blur: 10,
|
||||||
offset: [20, 20]
|
offset: [20, 20]
|
||||||
}
|
},
|
||||||
|
opacity: 0.2
|
||||||
});
|
});
|
||||||
|
|
||||||
layer.add(line);
|
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({
|
var stage = new Kinetic.Stage({
|
||||||
container: containerId,
|
container: containerId,
|
||||||
width: 578,
|
width: 578,
|
||||||
@ -2788,7 +2790,7 @@ Test.prototype.tests = {
|
|||||||
color: 'black',
|
color: 'black',
|
||||||
blur: 1,
|
blur: 1,
|
||||||
offset: [10, 10],
|
offset: [10, 10],
|
||||||
opacity: 0.2
|
opacity: 0.5
|
||||||
},
|
},
|
||||||
cornerRadius: 10,
|
cornerRadius: 10,
|
||||||
draggable: true,
|
draggable: true,
|
||||||
@ -5008,6 +5010,32 @@ Test.prototype.tests = {
|
|||||||
|
|
||||||
path.setData('M200,100h100v50z');
|
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) {
|
'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
|
Loading…
Reference in New Issue
Block a user