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

Merge branch 'add-stroke-gradient' of https://github.com/MaxGraey/konva into MaxGraey-add-stroke-gradient

Browse Source
This commit is contained in:
Anton Lavrenov 2018-03-10 09:49:43 +07:00
commit a91e00fc05
7 changed files with 408 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* new `Konva.Filters.Contrast`.
* new `Konva.Util.haveIntersection()` to detect collusion
* add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
* add gradients for strokes
## Changed

169
konva.js
View File

@ -2033,6 +2033,20 @@
this._fillRadialGradient(shape);
}
},
_strokeLinearGradient: function(shape) {
var start = shape.getStrokeLinearGradientStartPoint(),
end = shape.getStrokeLinearGradientEndPoint(),
colorStops = shape.getStrokeLinearGradientColorStops(),
grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
if (colorStops) {
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setAttr('strokeStyle', grd);
}
},
_stroke: function(shape) {
var dash = shape.dash(),
// ignore strokeScaleEnabled for Text
@ -2057,6 +2071,12 @@
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {
@ -9260,6 +9280,24 @@
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
/**
* get/set stroke linear gradient color stops
* @name strokeLinearGradientColorStops
* @method
* @memberof Konva.Shape.prototype
* @param {Array} colorStops
* @returns {Array} colorStops
* @example
* // get stroke linear gradient color stops
* var colorStops = shape.strokeLinearGradientColorStops();
*
* // create a linear gradient that starts with red, changes to blue
* // halfway through, and then changes to green
* shape.strokeLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillRadialGradientStartRadius',
@ -9480,6 +9518,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/**
* get/set fill pattern offset x
* @name fillPatternOffsetX
@ -9496,6 +9535,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/**
* get/set fill pattern offset y
* @name fillPatternOffsetY
@ -9537,6 +9577,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/**
* get/set fill pattern scale x
* @name fillPatternScaleX
@ -9553,6 +9594,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/**
* get/set fill pattern scale y
* @name fillPatternScaleY
@ -9594,11 +9636,38 @@
* });
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPoint',
['x', 'y']
);
/**
* get/set stroke linear gradient start point
* @name strokeLinearGradientStartPoint
* @method
* @memberof Konva.Shape.prototype
* @param {Object} startPoint
* @param {Number} startPoint.x
* @param {Number} startPoint.y
* @returns {Object}
* @example
* // get stroke linear gradient start point
* var startPoint = shape.strokeLinearGradientStartPoint();
*
* // set stroke linear gradient start point
* shape.strokeLinearGradientStartPoint({
* x: 20
* y: 10
* });
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillLinearGradientStartPointX',
0
);
/**
* get/set fill linear gradient start point x
* @name fillLinearGradientStartPointX
@ -9614,11 +9683,33 @@
* shape.fillLinearGradientStartPointX(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPointX',
0
);
/**
* get/set stroke linear gradient start point x
* @name linearLinearGradientStartPointX
* @method
* @memberof Konva.Shape.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get stroke linear gradient start point x
* var startPointX = shape.strokeLinearGradientStartPointX();
*
* // set stroke linear gradient start point x
* shape.strokeLinearGradientStartPointX(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillLinearGradientStartPointY',
0
);
/**
* get/set fill linear gradient start point y
* @name fillLinearGradientStartPointY
@ -9634,6 +9725,26 @@
* shape.fillLinearGradientStartPointY(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPointY',
0
);
/**
* get/set stroke linear gradient start point y
* @name strokeLinearGradientStartPointY
* @method
* @memberof Konva.Shape.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get stroke linear gradient start point y
* var startPointY = shape.strokeLinearGradientStartPointY();
*
* // set stroke linear gradient start point y
* shape.strokeLinearGradientStartPointY(20);
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'fillLinearGradientEndPoint',
@ -9660,6 +9771,32 @@
* });
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'strokeLinearGradientEndPoint',
['x', 'y']
);
/**
* get/set stroke linear gradient end point
* @name strokeLinearGradientEndPoint
* @method
* @memberof Konva.Shape.prototype
* @param {Object} endPoint
* @param {Number} endPoint.x
* @param {Number} endPoint.y
* @returns {Object}
* @example
* // get stroke linear gradient end point
* var endPoint = shape.strokeLinearGradientEndPoint();
*
* // set stroke linear gradient end point
* shape.strokeLinearGradientEndPoint({
* x: 20
* y: 10
* });
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
/**
* get/set fill linear gradient end point x
@ -9676,6 +9813,22 @@
* shape.fillLinearGradientEndPointX(20);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientEndPointX', 0);
/**
* get/set fill linear gradient end point x
* @name strokeLinearGradientEndPointX
* @method
* @memberof Konva.Shape.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get stroke linear gradient end point x
* var endPointX = shape.strokeLinearGradientEndPointX();
*
* // set stroke linear gradient end point x
* shape.strokeLinearGradientEndPointX(20);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
/**
* get/set fill linear gradient end point y
@ -9692,6 +9845,22 @@
* shape.fillLinearGradientEndPointY(20);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientEndPointY', 0);
/**
* get/set stroke linear gradient end point y
* @name strokeLinearGradientEndPointY
* @method
* @memberof Konva.Shape.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get stroke linear gradient end point y
* var endPointY = shape.strokeLinearGradientEndPointY();
*
* // set stroke linear gradient end point y
* shape.strokeLinearGradientEndPointY(20);
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'fillRadialGradientStartPoint',

11
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/Context.js
View File

@ -584,6 +584,20 @@
this._fillRadialGradient(shape);
}
},
_strokeLinearGradient: function(shape) {
var start = shape.getStrokeLinearGradientStartPoint(),
end = shape.getStrokeLinearGradientEndPoint(),
colorStops = shape.getStrokeLinearGradientColorStops(),
grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
if (colorStops) {
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setAttr('strokeStyle', grd);
}
},
_stroke: function(shape) {
var dash = shape.dash(),
// ignore strokeScaleEnabled for Text
@ -608,6 +622,12 @@
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {

3
src/Factory.js
View File

@ -104,7 +104,10 @@
};
},
addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
Konva.Util.error('Adding deprecated ' + attr);
var method = GET + Konva.Util._capitalize(attr);
var message =
attr +
' property is deprecated and will be removed soon. Look at Konva change log for more information.';

166
src/Shape.js
View File

@ -173,7 +173,14 @@
* @returns {Boolean}
*/
hasStroke: function() {
return this.strokeEnabled() && !!this.stroke();
return (
this.strokeEnabled() &&
!!(
this.stroke() ||
this.getStrokeLinearGradientColorStops() ||
this.getStrokeRadialGradientColorStops()
)
);
},
/**
* determines if point is in the shape, regardless if other shapes are on top of it. Note: because
@ -1022,6 +1029,24 @@
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
/**
* get/set stroke linear gradient color stops
* @name strokeLinearGradientColorStops
* @method
* @memberof Konva.Shape.prototype
* @param {Array} colorStops
* @returns {Array} colorStops
* @example
* // get stroke linear gradient color stops
* var colorStops = shape.strokeLinearGradientColorStops();
*
* // create a linear gradient that starts with red, changes to blue
* // halfway through, and then changes to green
* shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillRadialGradientStartRadius',
@ -1242,6 +1267,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/**
* get/set fill pattern offset x
* @name fillPatternOffsetX
@ -1258,6 +1284,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/**
* get/set fill pattern offset y
* @name fillPatternOffsetY
@ -1299,6 +1326,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/**
* get/set fill pattern scale x
* @name fillPatternScaleX
@ -1315,6 +1343,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/**
* get/set fill pattern scale y
* @name fillPatternScaleY
@ -1356,11 +1385,38 @@
* });
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPoint',
['x', 'y']
);
/**
* get/set stroke linear gradient start point
* @name strokeLinearGradientStartPoint
* @method
* @memberof Konva.Shape.prototype
* @param {Object} startPoint
* @param {Number} startPoint.x
* @param {Number} startPoint.y
* @returns {Object}
* @example
* // get stroke linear gradient start point
* var startPoint = shape.strokeLinearGradientStartPoint();
*
* // set stroke linear gradient start point
* shape.strokeLinearGradientStartPoint({
* x: 20
* y: 10
* });
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillLinearGradientStartPointX',
0
);
/**
* get/set fill linear gradient start point x
* @name fillLinearGradientStartPointX
@ -1376,11 +1432,33 @@
* shape.fillLinearGradientStartPointX(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPointX',
0
);
/**
* get/set stroke linear gradient start point x
* @name linearLinearGradientStartPointX
* @method
* @memberof Konva.Shape.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get stroke linear gradient start point x
* var startPointX = shape.strokeLinearGradientStartPointX();
*
* // set stroke linear gradient start point x
* shape.strokeLinearGradientStartPointX(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'fillLinearGradientStartPointY',
0
);
/**
* get/set fill linear gradient start point y
* @name fillLinearGradientStartPointY
@ -1396,6 +1474,26 @@
* shape.fillLinearGradientStartPointY(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientStartPointY',
0
);
/**
* get/set stroke linear gradient start point y
* @name strokeLinearGradientStartPointY
* @method
* @memberof Konva.Shape.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get stroke linear gradient start point y
* var startPointY = shape.strokeLinearGradientStartPointY();
*
* // set stroke linear gradient start point y
* shape.strokeLinearGradientStartPointY(20);
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'fillLinearGradientEndPoint',
@ -1422,6 +1520,32 @@
* });
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'strokeLinearGradientEndPoint',
['x', 'y']
);
/**
* get/set stroke linear gradient end point
* @name strokeLinearGradientEndPoint
* @method
* @memberof Konva.Shape.prototype
* @param {Object} endPoint
* @param {Number} endPoint.x
* @param {Number} endPoint.y
* @returns {Object}
* @example
* // get stroke linear gradient end point
* var endPoint = shape.strokeLinearGradientEndPoint();
*
* // set stroke linear gradient end point
* shape.strokeLinearGradientEndPoint({
* x: 20
* y: 10
* });
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
/**
* get/set fill linear gradient end point x
@ -1438,6 +1562,26 @@
* shape.fillLinearGradientEndPointX(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientEndPointX',
0
);
/**
* get/set fill linear gradient end point x
* @name strokeLinearGradientEndPointX
* @method
* @memberof Konva.Shape.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get stroke linear gradient end point x
* var endPointX = shape.strokeLinearGradientEndPointX();
*
* // set stroke linear gradient end point x
* shape.strokeLinearGradientEndPointX(20);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
/**
* get/set fill linear gradient end point y
@ -1454,6 +1598,26 @@
* shape.fillLinearGradientEndPointY(20);
*/
Konva.Factory.addGetterSetter(
Konva.Shape,
'strokeLinearGradientEndPointY',
0
);
/**
* get/set stroke linear gradient end point y
* @name strokeLinearGradientEndPointY
* @method
* @memberof Konva.Shape.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get stroke linear gradient end point y
* var endPointY = shape.strokeLinearGradientEndPointY();
*
* // set stroke linear gradient end point y
* shape.strokeLinearGradientEndPointY(20);
*/
Konva.Factory.addComponentsGetterSetter(
Konva.Shape,
'fillRadialGradientStartPoint',

44
test/unit/Shape-test.js
View File

@ -279,9 +279,7 @@ suite('Shape', function() {
});
// ======================================================
test('set image fill to color then image then linear gradient then back to image', function(
done
) {
test('set image fill to color then image then linear gradient then back to image', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
@ -341,6 +339,41 @@ suite('Shape', function() {
imageObj.src = 'assets/darth-vader.jpg';
});
test('stroke gradient', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fillLinearGradientColorStops: [0, 'yellow', 0.5, 'red', 1, 'white'],
fillLinearGradientStartPoint: {
x: 0,
y: 0
},
scaleX: 3,
fillLinearGradientEndPoint: {
x: 100,
y: 100
},
strokeLinearGradientColorStops: [0, 'red', 0.5, 'blue', 1, 'green'],
strokeLinearGradientStartPoint: {
x: 0,
y: 0
},
strokeLinearGradientEndPoint: {
x: 100,
y: 100
}
});
layer.add(shape);
layer.draw();
});
// ======================================================
test('test enablers and disablers', function() {
var stage = addStage();
@ -989,7 +1022,10 @@ suite('Shape', function() {
assert.equal(rect.getY(), 50);
var trace = layer.getHitCanvas().getContext().getTrace(true);
var trace = layer
.getHitCanvas()
.getContext()
.getTrace(true);
assert.equal(
trace,
'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'