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

[WIP] Add stroke gradient

Browse Source
This commit is contained in:
MaxGraey 2018-03-07 16:58:38 +02:00
parent 2d595ba7a6
commit f5cd56d9d0
4 changed files with 344 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
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,7 +2071,15 @@
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
shape._strokeFunc(this);
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
this.stroke();
}
else {
shape._strokeFunc(this);
}
if (!strokeScaleEnabled) {
this.restore();
@ -9252,6 +9274,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',
@ -9472,6 +9512,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/**
* get/set fill pattern offset x
* @name fillPatternOffsetX
@ -9488,6 +9529,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/**
* get/set fill pattern offset y
* @name fillPatternOffsetY
@ -9529,6 +9571,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/**
* get/set fill pattern scale x
* @name fillPatternScaleX
@ -9545,6 +9588,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/**
* get/set fill pattern scale y
* @name fillPatternScaleY
@ -9586,11 +9630,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
@ -9606,11 +9677,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
@ -9626,6 +9719,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',
@ -9652,6 +9765,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
@ -9668,6 +9807,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
@ -9684,6 +9839,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',

6
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) {

149
src/Shape.js
View File

@ -1014,6 +1014,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',
@ -1234,6 +1252,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/**
* get/set fill pattern offset x
* @name fillPatternOffsetX
@ -1250,6 +1269,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/**
* get/set fill pattern offset y
* @name fillPatternOffsetY
@ -1291,6 +1311,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/**
* get/set fill pattern scale x
* @name fillPatternScaleX
@ -1307,6 +1328,7 @@
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/**
* get/set fill pattern scale y
* @name fillPatternScaleY
@ -1348,11 +1370,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
@ -1368,11 +1417,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
@ -1388,6 +1459,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',
@ -1414,6 +1505,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
@ -1430,6 +1547,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
@ -1446,6 +1579,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',