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

bugs fixes, docs updates. fix #535

Browse Source
This commit is contained in:
Anton Lavrenov 2019-01-11 08:51:46 -05:00
parent a3767bdf3d
commit 830eb53650
15 changed files with 268 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Changed
* Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.
* Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same
* Fixed `patternImage` and `radialGradient` for `Konva.Text`
### Removed
* `Konva.Util.addMethods`

1
konva.d.ts vendored
View File

@ -1031,6 +1031,7 @@ declare namespace Konva {
lineHeight?: number;
wrap?: string;
ellipsis?: boolean;
textDecoration?: string;
}
class Text extends Shape {

33
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v2.6.0
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Sun Jan 06 2019
* Date: Fri Jan 11 2019
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -1786,6 +1786,9 @@
if (fillPatternRotation) {
this.rotate(fillPatternRotation);
}
// TODO: optimize to fillPatternScaleX and fillPatternScaleY
// otherwise it is object (always true)
// do the same for offset
if (fillPatternScale) {
this.scale(fillPatternScale.x, fillPatternScale.y);
}
@ -1793,7 +1796,7 @@
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
this.setAttr('fillStyle', this.createPattern(shape.getFillPatternImage(), shape.getFillPatternRepeat() || 'repeat'));
this.fill();
shape._fillFunc(this);
};
SceneContext.prototype._fillLinearGradient = function (shape) {
var start = shape.getFillLinearGradientStartPoint(), end = shape.getFillLinearGradientEndPoint(), colorStops = shape.getFillLinearGradientColorStops(), grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
@ -1813,7 +1816,7 @@
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setAttr('fillStyle', grd);
this.fill();
shape._fillFunc(this);
};
SceneContext.prototype._fill = function (shape) {
var hasColor = shape.fill(), fillPriority = shape.getFillPriority();
@ -3908,7 +3911,8 @@
}());
Node.prototype.nodeType = 'Node';
/**
* get/set zIndex relative to the node's siblings who share the same parent
* get/set zIndex relative to the node's siblings who share the same parent.
* Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
* @name Konva.Node#zIndex
* @method
* @param {Number} index
@ -5032,6 +5036,8 @@
*/
Collection.mapMethods(Container);
// TODO: add a warning if stage has too many layers
// TODO: remove "content" events from docs
// CONSTANTS
var STAGE$1 = 'Stage', STRING = 'string', PX = 'px', MOUSEOUT = 'mouseout', MOUSELEAVE$1 = 'mouseleave', MOUSEOVER = 'mouseover', MOUSEENTER$1 = 'mouseenter', MOUSEMOVE = 'mousemove', MOUSEDOWN = 'mousedown', MOUSEUP = 'mouseup', CONTEXTMENU = 'contextmenu', CLICK = 'click', DBL_CLICK = 'dblclick', TOUCHSTART = 'touchstart', TOUCHEND = 'touchend', TAP = 'tap', DBL_TAP = 'dbltap', TOUCHMOVE = 'touchmove', WHEEL = 'wheel', CONTENT_MOUSEOUT = 'contentMouseout', CONTENT_MOUSEOVER = 'contentMouseover', CONTENT_MOUSEMOVE = 'contentMousemove', CONTENT_MOUSEDOWN = 'contentMousedown', CONTENT_MOUSEUP = 'contentMouseup', CONTENT_CONTEXTMENU = 'contentContextmenu', CONTENT_CLICK = 'contentClick', CONTENT_DBL_CLICK = 'contentDblclick', CONTENT_TOUCHSTART = 'contentTouchstart', CONTENT_TOUCHEND = 'contentTouchend', CONTENT_DBL_TAP = 'contentDbltap', CONTENT_TAP = 'contentTap', CONTENT_TOUCHMOVE = 'contentTouchmove', CONTENT_WHEEL = 'contentWheel', DIV = 'div', RELATIVE = 'relative', KONVA_CONTENT = 'konvajs-content', SPACE$1 = ' ', UNDERSCORE = '_', CONTAINER = 'container', EMPTY_STRING$1 = '', EVENTS = [
MOUSEDOWN,
@ -6821,6 +6827,7 @@
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
// TODO: cache gradient from context
function _fillFunc(context) {
context.fill();
}
@ -12282,6 +12289,10 @@
Factory.addGetterSetter(Star, 'outerRadius', 0, Validators.getNumberValidator());
Collection.mapMethods(Star);
// TODO:
// deprecate fill pattern image and fill gradient for text (and textpath?)
// we have API for that in docs
// I guess we should show a error or warning
// constants
var AUTO = 'auto',
//CANVAS = 'canvas',
@ -12333,7 +12344,7 @@
* @param {String} [config.verticalAlign] can be top, middle or bottom
* @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1
* @param {String} [config.wrap] can be word, char, or none. Default is word
* @param {String} [config.wrap] can be "word", "char", or "none". Default is word
* @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image
@ -12423,7 +12434,8 @@
config = config || {};
// set default color to black
if (!config.fillLinearGradientColorStops &&
!config.fillRadialGradientColorStops) {
!config.fillRadialGradientColorStops &&
!config.fillPatternImage) {
config.fill = config.fill || 'black';
}
_this = _super.call(this, config) || this;
@ -12440,6 +12452,7 @@
var padding = this.padding(), textHeight = this.getTextHeight(), lineHeightPx = this.lineHeight() * textHeight, textArr = this.textArr, textArrLen = textArr.length, verticalAlign = this.verticalAlign(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), textDecoration = this.textDecoration(), fill = this.fill(), fontSize = this.fontSize(), n;
context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', MIDDLE);
// TODO: do we have that property in context?
context.setAttr('textAlign', LEFT$1);
// handle vertical alignment
if (verticalAlign === MIDDLE) {
@ -12884,7 +12897,9 @@
*/
Factory.addGetterSetter(Text, 'lineHeight', 1, Validators.getNumberValidator());
/**
* get/set wrap. Can be word, char, or none. Default is word.
* get/set wrap. Can be "word", "char", or "none". Default is "word".
* In "word" wrapping any word still can be wrapped if it can't be placed in the required width
* without breaks.
* @name Konva.Text#wrap
* @method
* @param {String} wrap
@ -13171,10 +13186,10 @@
return this.textHeight;
};
TextPath.prototype.setText = function (text) {
Text.prototype.setText.call(this, text);
return Text.prototype.setText.call(this, text);
};
TextPath.prototype._getContextFont = function () {
Text.prototype._getContextFont.call(this);
return Text.prototype._getContextFont.call(this);
};
TextPath.prototype._getTextSize = function (text) {
var dummyCanvas = this.dummyCanvas;

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/Context.ts
View File

@ -483,9 +483,14 @@ export class SceneContext extends Context {
if (fillPatternX || fillPatternY) {
this.translate(fillPatternX || 0, fillPatternY || 0);
}
if (fillPatternRotation) {
this.rotate(fillPatternRotation);
}
// TODO: optimize to fillPatternScaleX and fillPatternScaleY
// otherwise it is object (always true)
// do the same for offset
if (fillPatternScale) {
this.scale(fillPatternScale.x, fillPatternScale.y);
}
@ -500,7 +505,7 @@ export class SceneContext extends Context {
shape.getFillPatternRepeat() || 'repeat'
)
);
this.fill();
shape._fillFunc(this);
}
_fillLinearGradient(shape) {
var start = shape.getFillLinearGradientStartPoint(),
@ -537,7 +542,7 @@ export class SceneContext extends Context {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
this.setAttr('fillStyle', grd);
this.fill();
shape._fillFunc(this);
}
_fill(shape) {
var hasColor = shape.fill(),

3
src/Node.ts
View File

@ -2153,7 +2153,8 @@ export abstract class Node {
Node.prototype.nodeType = 'Node';
/**
* get/set zIndex relative to the node's siblings who share the same parent
* get/set zIndex relative to the node's siblings who share the same parent.
* Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
* @name Konva.Node#zIndex
* @method
* @param {Number} index

2
src/Shape.ts
View File

@ -9,6 +9,8 @@ import { Context } from './Context';
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
// TODO: cache gradient from context
function _fillFunc(context) {
context.fill();
}

6
src/Stage.ts
View File

@ -1,13 +1,15 @@
import { Util, Collection } from './Util';
import { Factory, Validators } from './Factory';
import { Factory } from './Factory';
import { Container } from './Container';
import { document, isBrowser, getGlobalKonva, UA } from './Global';
import { Node } from './Node';
import { SceneCanvas, HitCanvas } from './Canvas';
import { GetSet, Vector2d } from './types';
import { Shape } from './Shape';
import { BaseLayer } from './BaseLayer';
// TODO: add a warning if stage has too many layers
// TODO: remove "content" events from docs
// CONSTANTS
var STAGE = 'Stage',
STRING = 'string',

16
src/shapes/Text.ts
View File

@ -5,6 +5,11 @@ import { UA } from '../Global';
import { GetSet } from '../types';
// TODO:
// deprecate fill pattern image and fill gradient for text (and textpath?)
// we have API for that in docs
// I guess we should show a error or warning
// constants
var AUTO = 'auto',
//CANVAS = 'canvas',
@ -77,7 +82,7 @@ function _strokeFunc(context) {
* @param {String} [config.verticalAlign] can be top, middle or bottom
* @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1
* @param {String} [config.wrap] can be word, char, or none. Default is word
* @param {String} [config.wrap] can be "word", "char", or "none". Default is word
* @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
* @@shapeParams
* @@nodeParams
@ -103,7 +108,8 @@ export class Text extends Shape {
// set default color to black
if (
!config.fillLinearGradientColorStops &&
!config.fillRadialGradientColorStops
!config.fillRadialGradientColorStops &&
!config.fillPatternImage
) {
config.fill = config.fill || 'black';
}
@ -139,6 +145,8 @@ export class Text extends Shape {
context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', MIDDLE);
// TODO: do we have that property in context?
context.setAttr('textAlign', LEFT);
// handle vertical alignment
@ -672,7 +680,9 @@ Factory.addGetterSetter(Text, 'verticalAlign', TOP);
Factory.addGetterSetter(Text, 'lineHeight', 1, Validators.getNumberValidator());
/**
* get/set wrap. Can be word, char, or none. Default is word.
* get/set wrap. Can be "word", "char", or "none". Default is "word".
* In "word" wrapping any word still can be wrapped if it can't be placed in the required width
* without breaks.
* @name Konva.Text#wrap
* @method
* @param {String} wrap

4
src/shapes/TextPath.ts
View File

@ -184,11 +184,11 @@ export class TextPath extends Shape {
return this.textHeight;
}
setText(text) {
Text.prototype.setText.call(this, text);
return Text.prototype.setText.call(this, text);
}
_getContextFont() {
Text.prototype._getContextFont.call(this);
return Text.prototype._getContextFont.call(this);
}
_getTextSize(text) {

2
test/runner.html
View File

@ -33,6 +33,8 @@
<div id="mocha"></div>
<div id="konva-container"></div>
<!-- TODO: use parcel for tests -->
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="lib/stats.js"></script>

1
test/runner.js
View File

@ -223,6 +223,7 @@ beforeEach(function() {
Konva.UA.mobile = false;
afterEach(function() {
// can we destroy stage?
clearTimeout(Konva.stages[Konva.stages.length - 1].dblTimeout);
// Konva.stages.forEach(function(stage) {
// stage.destroy();

25
test/unit/shapes/Circle-test.js
View File

@ -148,7 +148,30 @@ suite('Circle', function() {
layer.add(group);
stage.add(layer);
assert.equal(circle.getName(), 'myCircle');
var canvas = createCanvas();
var ctx = canvas.getContext('2d');
var start = { x: -35, y: -35 };
var end = { x: 35, y: 35 };
var colorStops = [0, 'red', 1, 'blue'];
var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
ctx.beginPath();
ctx.translate(circle.x(), circle.y());
ctx.arc(0, 0, 70, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = grd;
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();
compareLayerAndCanvas(layer, canvas, 200);
});
// ======================================================

168
test/unit/shapes/Text-test.js
View File

@ -737,28 +737,47 @@ suite('Text', function() {
});
});
test('gradient', function() {
test('linear gradient', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
fontSize: 100,
fontSize: 50,
y: 10,
x: 10,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'yellow', 1, 'yellow'],
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 300, y: 0 },
fillLinearGradientColorStops: [0, 'yellow', 0.5, 'yellow', 1, 'red'],
text: 'Text with gradient!!',
draggable: true
});
layer.add(text);
stage.add(layer);
//stage.on('mousemove', function() {
// console.log(stage.getPointerPosition());
//});
var data = layer.getContext().getImageData(41, 50, 1, 1).data;
var canvas = createCanvas();
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = 'normal 50px Arial';
ctx.textBaseline = 'middle';
var start = { x: 0, y: 0 };
var end = { x: 300, y: 0 };
var colorStops = [0, 'yellow', 0.5, 'yellow', 1, 'red'];
var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
ctx.fillStyle = grd;
ctx.fillText(text.text(), text.x(), text.y() + text.fontSize() / 2);
compareLayerAndCanvas(layer, canvas, 200);
var data = layer.getContext().getImageData(25, 41, 1, 1).data;
delete Konva.pixelRatio;
assert.equal(data[0], 255, 'full green');
assert.equal(data[1], 255, 'full red');
@ -766,6 +785,102 @@ suite('Text', function() {
assert.equal(data[3], 255, '255 alpha - fully visible');
});
// TODO: how to make correct behavior?
test.skip('linear gradient multiline', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
fontSize: 50,
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 0, y: 100 },
fillLinearGradientColorStops: [0, 'yellow', 1, 'red'],
text: 'Text with gradient!!\nText with gradient!!',
draggable: true
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = 'normal 50px Arial';
ctx.textBaseline = 'middle';
var start = { x: 0, y: 0 };
var end = { x: 0, y: 100 };
var colorStops = [0, 'yellow', 1, 'red'];
var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
ctx.fillStyle = grd;
ctx.fillText(text.text(), text.x(), text.y() + text.fontSize() / 2);
ctx.fillText(
text.text(),
text.x(),
text.y() + text.fontSize() / 2 + text.fontSize()
);
compareLayerAndCanvas(layer, canvas, 200);
var data = layer.getContext().getImageData(25, 41, 1, 1).data;
delete Konva.pixelRatio;
assert.equal(data[0], 255, 'full green');
assert.equal(data[1], 255, 'full red');
assert.equal(data[2], 0, 'no blue');
assert.equal(data[3], 255, '255 alpha - fully visible');
});
test('radial gradient', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
fontSize: 50,
y: 0,
x: 0,
fillRadialGradientStartPoint: { x: 100, y: 0 },
fillRadialGradientStartRadius: 0,
fillRadialGradientEndRadius: 100,
fillRadialGradientEndPoint: { x: 100, y: 0 },
fillRadialGradientColorStops: [0, 'yellow', 1, 'red'],
text: 'Text with gradient!!',
draggable: true
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = 'normal 50px Arial';
ctx.textBaseline = 'middle';
var start = { x: 100, y: 0 };
var end = { x: 100, y: 0 };
var colorStops = [0, 'yellow', 1, 'red'];
var grd = ctx.createRadialGradient(start.x, start.y, 0, end.x, end.y, 100);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
ctx.fillStyle = grd;
ctx.translate(0, 25);
ctx.fillText(text.text(), 0, 0);
compareLayerAndCanvas(layer, canvas, 200);
});
test('text should be centered in line height', function() {
var stage = addStage();
var layer = new Konva.Layer();
@ -837,4 +952,39 @@ suite('Text', function() {
assert.equal(lines[1].text, 'good text');
layer.draw();
});
test('image gradient for text', function(done) {
Konva.pixelRatio = 1;
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
text: 'Hello, this is some good text',
fontSize: 30,
fillPatternImage: imageObj
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = 'normal normal 30px Arial';
ctx.textBaseline = 'middle';
var grd = ctx.createPattern(imageObj, 'repeat');
ctx.translate(0, 15);
ctx.fillStyle = grd;
ctx.fillText(text.text(), 0, 0);
compareLayerAndCanvas(layer, canvas, 200);
delete Konva.pixelRatio;
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});

24
test/unit/shapes/TextPath-test.js
View File

@ -516,6 +516,30 @@ suite('TextPath', function() {
assert.equal(called, true);
});
test.skip('linear gradient for path', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const text = new Konva.TextPath({
x: 0,
y: 30,
text: 'AV',
fontSize: 20,
data: 'M0,0 L200,0',
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 200, y: 0 },
fillLinearGradientColorStops: [0, 'yellow', 1, 'red'],
text: 'Text with gradient!!'
});
layer.add(text);
layer.draw();
var trace = layer.getContext().getTrace();
console.log(trace);
});
test('visual check for text path', function() {
var stage = addStage();