lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-05-03 04:13:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added horizontal align logic back into the Text draw func

Browse Source
This commit is contained in:
Eric Rowell 2012-06-30 20:05:27 -07:00
parent e279ea30b9
commit aa4b0955c0
4 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dist/kinetic-core.js vendored
View File

@ -3895,41 +3895,43 @@ Kinetic.Text = function(config) {
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "Text";
this.boxShape = new Kinetic.Rect({});
var that = this;
this.textShape = new Kinetic.Shape({
drawFunc: function() {
var context = this.getContext();
var p = that.attrs.padding;
var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
var textArr = that.textArr;
// sync appliedShadow flag with boxShape
this.appliedShadow = that.boxShape.appliedShadow;
context.font = that.attrs.fontStyle + ' ' + that.attrs.fontSize + 'pt ' + that.attrs.fontFamily;
context.textBaseline = 'middle';
context.textAlign = 'left';
context.save();
var p = that.attrs.padding;
var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
// horizontal align
context.translate(p, 0);
// vertical align
context.translate(0, p + that.getTextHeight() / 2);
// draw text lines
var textArr = that.textArr;
for(var n = 0; n < textArr.length; n++) {
var text = textArr[n];
// horizontal alignment
context.save();
if(that.attrs.align === 'right') {
context.translate(that.getBoxWidth() - that._getTextSize(text).width - p * 2, 0);
}
else if(that.attrs.align === 'center') {
context.translate((that.getBoxWidth() - that._getTextSize(text).width - p * 2) / 2, 0);
}
this.fillText(text);
this.strokeText(text);
context.restore();
context.translate(0, lineHeightPx);
}
context.restore();
}
});
@ -3941,7 +3943,7 @@ Kinetic.Text = function(config) {
this.add(this.boxShape);
this.add(this.textShape);
// sync attrs
// sync attr event bindings
var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
var that = this;
for(var n = 0; n < attrs.length; n++) {

2
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
src/shapes/Text.js
View File

@ -26,41 +26,43 @@ Kinetic.Text = function(config) {
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "Text";
this.boxShape = new Kinetic.Rect({});
var that = this;
this.textShape = new Kinetic.Shape({
drawFunc: function() {
var context = this.getContext();
var p = that.attrs.padding;
var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
var textArr = that.textArr;
// sync appliedShadow flag with boxShape
this.appliedShadow = that.boxShape.appliedShadow;
context.font = that.attrs.fontStyle + ' ' + that.attrs.fontSize + 'pt ' + that.attrs.fontFamily;
context.textBaseline = 'middle';
context.textAlign = 'left';
context.save();
var p = that.attrs.padding;
var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
// horizontal align
context.translate(p, 0);
// vertical align
context.translate(0, p + that.getTextHeight() / 2);
// draw text lines
var textArr = that.textArr;
for(var n = 0; n < textArr.length; n++) {
var text = textArr[n];
// horizontal alignment
context.save();
if(that.attrs.align === 'right') {
context.translate(that.getBoxWidth() - that._getTextSize(text).width - p * 2, 0);
}
else if(that.attrs.align === 'center') {
context.translate((that.getBoxWidth() - that._getTextSize(text).width - p * 2) / 2, 0);
}
this.fillText(text);
this.strokeText(text);
context.restore();
context.translate(0, lineHeightPx);
}
context.restore();
}
});
@ -72,7 +74,7 @@ Kinetic.Text = function(config) {
this.add(this.boxShape);
this.add(this.textShape);
// sync attrs
// sync attr event bindings
var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
var that = this;
for(var n = 0; n < attrs.length; n++) {

14
tests/js/unitTests.js
View File

@ -2848,9 +2848,10 @@ Test.prototype.tests = {
textFill: '#888',
textStroke: '#333',
align: 'right',
lineHeight: 1.2,
width: 400,
height: 100,
padding: 40,
padding: 10,
shadow: {
color: 'black',
blur: 1,
@ -2884,14 +2885,20 @@ Test.prototype.tests = {
test(text.getTextFill() == '#888', 'text fill should be #888');
test(text.getTextStroke() == '#333', 'text fill should be #333');
test(text.getAlign() === 'right', 'text should be aligned right');
test(text.getLineHeight() === 1.2, 'line height should be 1.2');
test(text.getWidth() === 400, 'width should be 400');
test(text.getHeight() === 100, 'height should be 100');
test(text.getPadding() === 40, 'padding should be 40');
test(text.getPadding() === 10, 'padding should be 10');
test(text.getShadow().color === 'black', 'text box shadow color should be black');
test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
test(text.getDraggable() === true, 'text should be draggable');
test(text.getDetectionType() === 'path', 'text detection type should be path');
test(text.getBoxWidth() === 400, 'box width should be 400');
test(text.getBoxHeight() === 100, 'box height should be 100');
test(text.getTextWidth() > 0, 'text width should be greater than 0');
test(text.getTextHeight() > 0, 'text height should be greater than 0');
text.setX(1);
text.setY(2);
text.setStroke('orange');
@ -2935,7 +2942,7 @@ Test.prototype.tests = {
test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
},
'*SHAPE - text multi line': function(containerId) {
'SHAPE - text multi line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2956,6 +2963,7 @@ Test.prototype.tests = {
textFill: '#555',
width: 380,
padding: 20,
align: 'center',
shadow: {
color: 'black',
blur: 1,