lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-21 04:27:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed #301: TextPath not responding to events (now rendering glyphs to hit canvas for event detection)

Browse Source
This commit is contained in:
Jason Follas
2013-10-07 21:28:08 -04:00
parent 1965f61da2
commit 0da4b98e91
2 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/plugins/TextPath.js
View File

@@ -52,7 +52,9 @@
// TODO: shouldn't this be on the prototype? // TODO: shouldn't this be on the prototype?
this._fillFunc = _fillFunc; this._fillFunc = _fillFunc;
this._strokeFunc = _strokeFunc; this._strokeFunc = _strokeFunc;
this._fillFuncHit = _fillFunc;
this._strokeFuncHit = _strokeFunc;
this.className = 'TextPath'; this.className = 'TextPath';
this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
@@ -65,8 +67,6 @@
that._setTextData(); that._setTextData();
}, },
drawFunc: function(context) { drawFunc: function(context) {
var charArr = this.charArr;
context.setAttr('font', this._getContextFont()); context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', 'middle'); context.setAttr('textBaseline', 'middle');
context.setAttr('textAlign', 'left'); context.setAttr('textAlign', 'left');
@@ -77,8 +77,6 @@
context.save(); context.save();
var p0 = glyphInfo[i].p0; var p0 = glyphInfo[i].p0;
var p1 = glyphInfo[i].p1;
var ht = parseFloat(this.attrs.fontSize);
context.translate(p0.x, p0.y); context.translate(p0.x, p0.y);
context.rotate(glyphInfo[i].rotation); context.rotate(glyphInfo[i].rotation);
@@ -93,7 +91,7 @@
// context.strokeStyle = 'cyan'; // context.strokeStyle = 'cyan';
// else // else
// context.strokeStyle = 'green'; // context.strokeStyle = 'green';
// var p1 = glyphInfo[i].p1;
// context.moveTo(p0.x, p0.y); // context.moveTo(p0.x, p0.y);
// context.lineTo(p1.x, p1.y); // context.lineTo(p1.x, p1.y);
// context.stroke(); // context.stroke();
@@ -183,7 +181,7 @@
var currLen = 0; var currLen = 0;
var attempts = 0; var attempts = 0;
var needNextSegment = false;
p1 = undefined; p1 = undefined;
while(Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 && attempts < 25) { while(Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 && attempts < 25) {
attempts++; attempts++;

9
test/unit/plugins/TextPath-test.js
View File

@@ -16,17 +16,18 @@ suite('TextPath', function() {
layer.add(path); layer.add(path);
var textpath = new Kinetic.TextPath({ var textpath = new Kinetic.TextPath({
stroke: 'black',
strokeWidth: 1,
fill: 'orange', fill: 'orange',
fontSize: '18', fontSize: '24',
fontFamily: 'Arial', fontFamily: 'Arial',
text: 'The quick brown fox jumped over the lazy dog\'s back', text: 'The quick brown fox jumped over the lazy dog\'s back',
data: c data: c
}); });
textpath.on('mouseover', function() { this.setFill('blue'); layer.drawScene(); });
textpath.on('mouseout', function() { this.setFill('orange'); layer.drawScene(); });
layer.add(textpath); layer.add(textpath);
stage.add(layer); stage.add(layer);
showHit(layer);
assert.equal(textpath.getClassName(), 'TextPath', 'getClassName should be TextPath'); assert.equal(textpath.getClassName(), 'TextPath', 'getClassName should be TextPath');