lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'kudlajz-master'

Browse Source
This commit is contained in:
Anton Lavrenov
2017-02-07 11:37:42 -05:00
parent 9c87bc7f07 1184bb7e71
commit befc8c50d3
5 changed files with 650 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
## Added
- `textDecoration` of `Konva.Text` now supports `line-through`
## [1.3.0][2017-01-10]
## Added

28
konva.js
View File

@@ -3,7 +3,7 @@
* Konva JavaScript Framework v1.3.0
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Tue Jan 10 2017
* Date: Tue Feb 07 2017
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -13148,14 +13148,24 @@
context.translate((totalWidth - width - p * 2) / 2, 0);
}
if (textDecoration === 'underline') {
if (textDecoration.indexOf('underline') !== -1) {
context.save();
context.beginPath();
context.moveTo(0, Math.round(lineHeightPx / 2));
context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
// TODO: I have no idea what is real ratio
// just /20 looks good enough
context.lineWidth = fontSize / 20;
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
context.stroke();
context.restore();
}
if (textDecoration.indexOf('line-through') !== -1) {
context.save();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(Math.round(width), 0);
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
context.stroke();
context.restore();
@@ -13568,10 +13578,10 @@
* text.text('Hello world!');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', null);
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
/**
* get/set text decoration of a text. Can be '' or 'underline'
* get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space
* @name textDecoration
* @method
* @memberof Konva.Text.prototype
@@ -13581,8 +13591,14 @@
* // get text decoration
* var textDecoration = text.textDecoration();
*
* // center text
* // underline text
* text.textDecoration('underline');
*
* // strike text
* text.textDecoration('line-through');
*
* // underline and strike text
* text.textDecoration('underline line-through');
*/
Konva.Collection.mapMethods(Konva.Text);

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
src/shapes/Text.js
View File

@@ -141,14 +141,24 @@
context.translate((totalWidth - width - p * 2) / 2, 0);
}
if (textDecoration === 'underline') {
if (textDecoration.indexOf('underline') !== -1) {
context.save();
context.beginPath();
context.moveTo(0, Math.round(lineHeightPx / 2));
context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
// TODO: I have no idea what is real ratio
// just /20 looks good enough
context.lineWidth = fontSize / 20;
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
context.stroke();
context.restore();
}
if (textDecoration.indexOf('line-through') !== -1) {
context.save();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(Math.round(width), 0);
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
context.stroke();
context.restore();
@@ -561,10 +571,10 @@
* text.text('Hello world!');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', null);
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
/**
* get/set text decoration of a text. Can be '' or 'underline'
* get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space
* @name textDecoration
* @method
* @memberof Konva.Text.prototype
@@ -574,8 +584,14 @@
* // get text decoration
* var textDecoration = text.textDecoration();
*
* // center text
* // underline text
* text.textDecoration('underline');
*
* // strike text
* text.textDecoration('line-through');
*
* // underline and strike text
* text.textDecoration('underline line-through');
*/
Konva.Collection.mapMethods(Konva.Text);

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

@@ -14,7 +14,9 @@ suite('Text', function(){
});
// ======================================================
test('text with undefined text property should not throw an error', function() {
test(
'text with undefined text property should not throw an error',
function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -25,7 +27,8 @@ suite('Text', function(){
layer.draw();
assert.equal(text.getWidth(), 0);
});
}
);
test('add text with shadows', function() {
var stage = addStage();
@@ -98,24 +101,21 @@ suite('Text', function(){
shadowBlur: 0
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'middle';
context.font = "normal normal 50px Arial";
context.font = 'normal normal 50px Arial';
context.fillStyle = 'darkgrey';
context.fillText('Hello World!', 10, 10 + 50 + 25);
context.fillStyle = 'black';
context.fillText('Hello World!', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 254);
});
test('text cache with fill and shadow', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
@@ -303,7 +303,6 @@ suite('Text', function(){
//layer.setListening(false);
layer.drawHit();
});
// ======================================================
@@ -342,7 +341,7 @@ suite('Text', function(){
var text = new Konva.Text({
x: 10,
y: 10,
text: 'HEADING\n\nAll the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 14,
fontFamily: 'Calibri',
@@ -368,7 +367,6 @@ suite('Text', function(){
assert.equal(text.getLineHeight(), 20);
});
// ======================================================
test('text multi line with justify align', function() {
var stage = addStage();
@@ -385,7 +383,7 @@ suite('Text', function(){
var text = new Konva.Text({
x: 10,
y: 10,
text: 'HEADING\n\n All the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\n All the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
fontSize: 14,
fontFamily: 'Calibri',
fontStyle: 'normal',
@@ -399,7 +397,6 @@ suite('Text', function(){
rect.height(text.getHeight());
layer.add(rect).add(text);
// var text2 = new Konva.Text({
// x: 10,
// y: 110,
@@ -417,8 +414,6 @@ suite('Text', function(){
stage.add(layer);
var trace = 'fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();restore();';
assert.equal(layer.getContext().getTrace(true), trace);
@@ -434,7 +429,7 @@ suite('Text', function(){
y: 10,
//stroke: '#555',
//strokeWidth: 5,
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: "HEADING\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 16,
fontFamily: 'Calibri',
@@ -454,16 +449,13 @@ suite('Text', function(){
layer.add(text);
stage.add(layer);
//console.log(layer.getContext().getTrace());
});
// ======================================================
// skiping this test for now. It fails on travis. WHYYY??!?!?!
// TODO: restore it
test.skip('text multi line with textDecoration and spacing', function() {
test.skip('text multi line with underline and spacing', function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -483,9 +475,50 @@ suite('Text', function(){
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 15px Arial;textBaseline=middle;textAlign=left;save();translate(0,7.5);save();save();beginPath();moveTo(0,8);lineTo(52,8);stroke();restore();fillStyle=red;fillText(h,0,0);translate(13,0);fillStyle=red;fillText(e,0,0);translate(13,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(o,0,0);translate(13,0);restore();translate(0,15);save();save();beginPath();moveTo(0,8);lineTo(56,8);stroke();restore();fillStyle=red;fillText(w,0,0);translate(16,0);fillStyle=red;fillText(o,0,0);translate(13,0);fillStyle=red;fillText(r,0,0);translate(10,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(d,0,0);translate(13,0);restore();translate(0,15);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
test('text multi line with strike', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'hello\nworld',
fontSize: 80,
fill: 'red',
textDecoration: 'line-through'
});
layer.add(text);
stage.add(layer);
// TODO
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
// console.log(layer.getContext().getTrace());
assert.equal(layer.getContext().getTrace(), trace);
});
test('text multi line with underline and strike', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'hello\nworld',
fontSize: 80,
fill: 'red',
textDecoration: 'underline line-through'
});
layer.add(text);
stage.add(layer);
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;save();translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(169,0);stroke();restore();fillStyle=red;fillText(hello,0,0);restore();translate(0,80);save();save();beginPath();moveTo(0,40);lineTo(191,40);stroke();restore();save();beginPath();moveTo(0,0);lineTo(191,0);stroke();restore();fillStyle=red;fillText(world,0,0);restore();translate(0,80);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
@@ -509,8 +542,6 @@ suite('Text', function(){
var width = text.getWidth();
var height = text.getHeight();
layer.add(text);
stage.add(layer);
@@ -521,7 +552,6 @@ suite('Text', function(){
assert(text.getWidth() > width, 'width should have increased');
assert(text.getHeight() > height, 'height should have increased');
});
test('get text width', function() {
var stage = addStage();
@@ -536,7 +566,6 @@ suite('Text', function(){
layer.add(text);
layer.draw();
assert.equal(text.getTextWidth() > 0 && text.getTextWidth() < 100, true);
});
test('default text color should be black', function() {
@@ -593,7 +622,10 @@ suite('Text', function(){
var rect = text.getSelfRect();
assert.deepEqual(rect, {
x : 0,y : 0, width : text.width(), height : 50
x: 0,
y: 0,
width: text.width(),
height: 50
});
});
@@ -653,5 +685,4 @@ suite('Text', function(){
assert.equal(data[2], 0, 'no blue');
assert.equal(data[3], 255, '255 alpha - fully visible');
});
});