lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-20 19:01:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better TextPath hit function

Browse Source
This commit is contained in:
Anton Lavrenov
2016-09-12 07:28:42 -04:00
parent 2d5f5a534d
commit e8b2423c82
5 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -4,6 +4,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
## [1.1.2][2016-09-12]
### Changed
- Better hit function for `TextPath`.
- Validation of `Shape` filters.
## [1.1.2][2016-09-10]
### Fixed

3
konva.js
View File

@@ -15013,6 +15013,7 @@
this.dataArray = Konva.Path.parsePathData(this.attrs.data);
this.on('dataChange.konva', function() {
that.dataArray = Konva.Path.parsePathData(this.attrs.data);
that._setTextData();
});
// update text data for certain attr changes
@@ -15102,7 +15103,7 @@
this.glyphInfo = [];
var charArr = this.attrs.text.split('');
var charArr = this.getText().split('');
var p0, p1, pathCmd;

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/shapes/TextPath.js
View File

@@ -62,12 +62,14 @@
this.dataArray = Konva.Path.parsePathData(this.attrs.data);
this.on('dataChange.konva', function() {
that.dataArray = Konva.Path.parsePathData(this.attrs.data);
that._setTextData();
});
// update text data for certain attr changes
this.on('textChange.konva textStroke.konva textStrokeWidth.konva', that._setTextData);
that._setTextData();
this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc);
},
_sceneFunc: function(context) {
context.setAttr('font', this._getContextFont());
@@ -101,6 +103,22 @@
}
context.restore();
},
_hitFunc: function(context) {
context.beginPath();
var glyphInfo = this.glyphInfo;
if (glyphInfo.length >= 1) {
var p0 = glyphInfo[0].p0;
context.moveTo(p0.x, p0.y);
}
for(var i = 0; i < glyphInfo.length; i++) {
var p1 = glyphInfo[i].p1;
context.lineTo(p1.x, p1.y);
}
context.setAttr('lineWidth', this.getFontSize());
context.setAttr('strokeStyle', this.colorKey);
context.stroke();
},
/**
* get text width in pixels
* @method
@@ -151,7 +169,7 @@
this.glyphInfo = [];
var charArr = this.attrs.text.split('');
var charArr = this.getText().split('');
var p0, p1, pathCmd;

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

@@ -24,11 +24,11 @@ suite('TextPath', function() {
});
textpath.on('mouseover', function() { this.setFill('blue'); layer.drawScene(); });
textpath.on('mouseout', function() { this.setFill('orange'); layer.drawScene(); });
layer.add(textpath);
stage.add(layer);
showHit(layer);
assert.equal(textpath.getClassName(), 'TextPath', 'getClassName should be TextPath');
var trace = layer.getContext().getTrace(true);
@@ -41,7 +41,7 @@ suite('TextPath', function() {
var stage = addStage();
var layer = new Konva.Layer();
var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0";
var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0";
var path = new Konva.Path({
stroke: 'red',
strokeWidth: 1,
@@ -58,9 +58,9 @@ suite('TextPath', function() {
});
layer.add(textpath);
stage.add(layer);
stage.add(layer);
});
// ======================================================
test('Render Text Along Vertical Line', function() {
var stage = addStage();
@@ -88,8 +88,8 @@ suite('TextPath', function() {
});
layer.add(textpath);
// Bottom up
c = "M 150,150 150,10";
@@ -110,12 +110,12 @@ suite('TextPath', function() {
text: 'The quick brown fox jumped over the lazy dog\'s back',
data: c
});
layer.add(textpath);
stage.add(layer);
});
// ======================================================
test('Render Text Along two connected Bezier', function() {
var stage = addStage();
@@ -144,7 +144,7 @@ suite('TextPath', function() {
stage.add(layer);
});
// ======================================================
test('Render Text Along Elliptical Arc', function() {
var stage = addStage();
@@ -169,7 +169,7 @@ suite('TextPath', function() {
layer.add(textpath);
stage.add(layer);
});
// ======================================================
test('Render Text Along complex path', function() {
var stage = addStage();
@@ -190,7 +190,7 @@ suite('TextPath', function() {
});
// ======================================================
test('Render Text Along complex path cached', function() {
test.only('Render Text Along complex path cached', function() {
var stage = addStage();
var layer = new Konva.Layer();
@@ -215,4 +215,4 @@ suite('TextPath', function() {
cloneAndCompareLayer(layer,50);
showHit(layer);
});
});
});