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

more fixes for gradient

Browse Source
This commit is contained in:
Anton Lavrenov 2019-02-20 11:33:00 -05:00
parent 3f410b7d3b
commit 645ac49882
4 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
konva.js
View File

@ -12539,6 +12539,7 @@
Text.prototype._sceneFunc = function (context) {
var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, textArr = this.textArr, textArrLen = textArr.length, verticalAlign = this.verticalAlign(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
var translateY = 0;
var translateY = lineHeightPx / 2;
var lineTranslateX = 0;
var lineTranslateY = 0;
context.setAttr('font', this._getContextFont());
@ -12551,7 +12552,7 @@
else if (verticalAlign === BOTTOM) {
alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
}
context.translate(padding, alignY + padding + lineHeightPx / 2);
context.translate(padding, alignY + padding);
// draw text lines
for (n = 0; n < textArrLen; n++) {
var lineTranslateX = 0;

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/shapes/Text.ts
View File

@ -140,6 +140,7 @@ export class Text extends Shape {
n;
var translateY = 0;
var translateY = lineHeightPx / 2;
var lineTranslateX = 0;
var lineTranslateY = 0;
@ -157,7 +158,7 @@ export class Text extends Shape {
alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
}
context.translate(padding, alignY + padding + lineHeightPx / 2);
context.translate(padding, alignY + padding);
// draw text lines
for (n = 0; n < textArrLen; n++) {

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

@ -534,7 +534,7 @@ suite('Text', function() {
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;translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(189,40);stroke();restore();fillStyle=red;fillText(h,0,0);fillStyle=red;fillText(e,49,0);fillStyle=red;fillText(l,98,0);fillStyle=red;fillText(l,121,0);fillStyle=red;fillText(o,144,0);restore();save();save();beginPath();moveTo(0,120);lineTo(211,120);stroke();restore();fillStyle=red;fillText(w,0,80);fillStyle=red;fillText(o,63,80);fillStyle=red;fillText(r,112,80);fillStyle=red;fillText(l,144,80);fillStyle=red;fillText(d,167,80);restore();restore();';
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(189,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49,40);fillStyle=red;fillText(l,98,40);fillStyle=red;fillText(l,121,40);fillStyle=red;fillText(o,144,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,63,120);fillStyle=red;fillText(r,112,120);fillStyle=red;fillText(l,144,120);fillStyle=red;fillText(d,167,120);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
@ -678,7 +678,7 @@ suite('Text', function() {
stage.add(layer);
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,50);save();fillStyle=#555;fillText(Some awesome text,17.523,0);restore();restore();';
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17.523,8);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
@ -766,8 +766,6 @@ suite('Text', function() {
var text = new Konva.Text({
fontSize: 50,
y: 10,
x: 10,
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 300, y: 0 },
fillLinearGradientColorStops: [0, 'black', 1, 'red'],
@ -900,6 +898,14 @@ suite('Text', function() {
var stage = addStage();
var layer = new Konva.Layer();
layer.add(
new Konva.Rect({
stroke: 'black',
width: 100,
height: 40 * 3
})
);
var text = new Konva.Text({
fontSize: 40,
text: 'Some good text',
@ -912,7 +918,7 @@ suite('Text', function() {
// this text should look like it is positioned in y = 40
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,60);save();fillStyle=black;fillText(Some good text,0,0);restore();restore();';
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,100,120);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Some good text,0,60);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
@ -991,10 +997,9 @@ suite('Text', function() {
ctx.textBaseline = 'middle';
var grd = ctx.createPattern(imageObj, 'repeat');
ctx.translate(0, 15);
ctx.fillStyle = grd;
ctx.fillText(text.text(), 0, 0);
ctx.fillText(text.text(), 0, 15);
compareLayerAndCanvas(layer, canvas, 200);
delete Konva.pixelRatio;