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

Added support for text strikethrough

Browse Source
This commit is contained in:
kudlajz 2017-02-07 15:32:14 +01:00
parent 21c3430664
commit 4b48544059
4 changed files with 88 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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);

8
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);

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

@ -463,7 +463,7 @@ suite('Text', function(){
// ======================================================
// 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();
@ -488,6 +488,46 @@ suite('Text', function(){
});
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
// 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);
// TODO
// assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
test('change font size should update text data', function() {
var stage = addStage();