mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
fix: fix align in text path
This commit is contained in:
gtktsc
parent
888fbf3254
commit
a622479674
@ -181,7 +181,7 @@ Run `npx gulp api` which will build the documentation files and place them in th
|
||||
# Pull Requests
|
||||
|
||||
I'd be happy to review any pull requests that may better the Konva project,
|
||||
in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the tests pass (`gulp lint test`).
|
||||
in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the tests pass (`npm run test`).
|
||||
|
||||
## Contributors
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
"test:build": "parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
|
||||
"test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
|
||||
"test:node": "ts-mocha -p ./test/tsconfig.json test/unit/**/*.ts --exit && npm run test:import",
|
||||
"test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html",
|
||||
"test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/text-paths.html",
|
||||
"tsc": "tsc --removeComments && tsc --build ./tsconfig-cmj.json",
|
||||
"rollup": "rollup -c --bundleConfigAsCjs",
|
||||
"clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./cmj && rm -rf ./test-build",
|
||||
|
||||
@ -74,6 +74,7 @@ function _strokeFunc(context) {
|
||||
export class TextPath extends Shape<TextPathConfig> {
|
||||
dummyCanvas = Util.createCanvasElement();
|
||||
dataArray = [];
|
||||
path: SVGPathElement | Path;
|
||||
glyphInfo: Array<{
|
||||
transposeX: number;
|
||||
transposeY: number;
|
||||
@ -90,9 +91,10 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
// call super constructor
|
||||
super(config);
|
||||
|
||||
this.dataArray = Path.parsePathData(this.attrs.data);
|
||||
this._readDataAttribute();
|
||||
|
||||
this.on('dataChange.konva', function () {
|
||||
this.dataArray = Path.parsePathData(this.attrs.data);
|
||||
this._readDataAttribute();
|
||||
this._setTextData();
|
||||
});
|
||||
|
||||
@ -105,6 +107,21 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
this._setTextData();
|
||||
}
|
||||
|
||||
_readDataAttribute() {
|
||||
this.dataArray = Path.parsePathData(this.attrs.data);
|
||||
// in case document is not defined (server side rendering)
|
||||
// use the KonvaJs Path class instead of the browser's native SVGPathElement
|
||||
if (typeof window !== 'undefined' && document) {
|
||||
this.path = document.createElementNS(
|
||||
'http://www.w3.org/2000/svg',
|
||||
'path'
|
||||
) as SVGPathElement;
|
||||
this.path.setAttribute('d', this.attrs.data);
|
||||
} else {
|
||||
this.path = new Path({ data: this.attrs.data }) as Path;
|
||||
}
|
||||
}
|
||||
|
||||
_sceneFunc(context) {
|
||||
context.setAttr('font', this._getContextFont());
|
||||
context.setAttr('textBaseline', this.textBaseline());
|
||||
@ -210,258 +227,88 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
};
|
||||
}
|
||||
_setTextData() {
|
||||
var that = this;
|
||||
var size = this._getTextSize(this.attrs.text);
|
||||
var letterSpacing = this.letterSpacing();
|
||||
var align = this.align();
|
||||
var kerningFunc = this.kerningFunc();
|
||||
const { width, height } = this._getTextSize(this.attrs.text);
|
||||
this.textWidth = width;
|
||||
this.textHeight = height;
|
||||
this.glyphInfo = [];
|
||||
|
||||
this.textWidth = size.width;
|
||||
this.textHeight = size.height;
|
||||
if (!this.attrs.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var textFullWidth = Math.max(
|
||||
const letterSpacing = this.letterSpacing();
|
||||
const align = this.align();
|
||||
const kerningFunc = this.kerningFunc();
|
||||
|
||||
// defines the width of the text on a straight line
|
||||
const textWidth = Math.max(
|
||||
this.textWidth + ((this.attrs.text || '').length - 1) * letterSpacing,
|
||||
0
|
||||
);
|
||||
|
||||
this.glyphInfo = [];
|
||||
// defines the length of the path
|
||||
// if possible use native browser method, otherwise use KonvaJS implementation
|
||||
const pathLength =
|
||||
(this.path as SVGPathElement).getTotalLength?.() ||
|
||||
(this.path as Path).getLength?.();
|
||||
|
||||
var fullPathWidth = 0;
|
||||
for (var l = 0; l < that.dataArray.length; l++) {
|
||||
if (that.dataArray[l].pathLength > 0) {
|
||||
fullPathWidth += that.dataArray[l].pathLength;
|
||||
}
|
||||
}
|
||||
|
||||
var offset = 0;
|
||||
let offset = 0;
|
||||
if (align === 'center') {
|
||||
offset = Math.max(0, fullPathWidth / 2 - textFullWidth / 2);
|
||||
offset = Math.max(0, pathLength / 2 - textWidth / 2);
|
||||
}
|
||||
if (align === 'right') {
|
||||
offset = Math.max(0, fullPathWidth - textFullWidth);
|
||||
offset = Math.max(0, pathLength - textWidth);
|
||||
}
|
||||
|
||||
var charArr = stringToArray(this.text());
|
||||
var spacesNumber = this.text().split(' ').length - 1;
|
||||
const charArr = stringToArray(this.text());
|
||||
|
||||
var p0, p1, pathCmd;
|
||||
|
||||
var pIndex = -1;
|
||||
var currentT = 0;
|
||||
// var sumLength = 0;
|
||||
// for(var j = 0; j < that.dataArray.length; j++) {
|
||||
// if(that.dataArray[j].pathLength > 0) {
|
||||
//
|
||||
// if (sumLength + that.dataArray[j].pathLength > offset) {}
|
||||
// fullPathWidth += that.dataArray[j].pathLength;
|
||||
// }
|
||||
// }
|
||||
|
||||
var getNextPathSegment = function () {
|
||||
currentT = 0;
|
||||
var pathData = that.dataArray;
|
||||
|
||||
for (var j = pIndex + 1; j < pathData.length; j++) {
|
||||
if (pathData[j].pathLength > 0) {
|
||||
pIndex = j;
|
||||
|
||||
return pathData[j];
|
||||
} else if (pathData[j].command === 'M') {
|
||||
p0 = {
|
||||
x: pathData[j].points[0],
|
||||
y: pathData[j].points[1],
|
||||
};
|
||||
}
|
||||
const getPointAtLength = (length: number) => {
|
||||
// if path is not defined yet, do nothing
|
||||
if (!this.attrs.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
var findSegmentToFitCharacter = function (c) {
|
||||
var glyphWidth = that._getTextSize(c).width + letterSpacing;
|
||||
|
||||
if (c === ' ' && align === 'justify') {
|
||||
glyphWidth += (fullPathWidth - textFullWidth) / spacesNumber;
|
||||
}
|
||||
|
||||
var currLen = 0;
|
||||
var attempts = 0;
|
||||
|
||||
p1 = undefined;
|
||||
while (
|
||||
Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 &&
|
||||
attempts < 20
|
||||
) {
|
||||
attempts++;
|
||||
var cumulativePathLength = currLen;
|
||||
while (pathCmd === undefined) {
|
||||
pathCmd = getNextPathSegment();
|
||||
|
||||
if (
|
||||
pathCmd &&
|
||||
cumulativePathLength + pathCmd.pathLength < glyphWidth
|
||||
) {
|
||||
cumulativePathLength += pathCmd.pathLength;
|
||||
pathCmd = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(pathCmd).length === 0 || p0 === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
var needNewSegment = false;
|
||||
|
||||
switch (pathCmd.command) {
|
||||
case 'L':
|
||||
if (
|
||||
Path.getLineLength(
|
||||
p0.x,
|
||||
p0.y,
|
||||
pathCmd.points[0],
|
||||
pathCmd.points[1]
|
||||
) > glyphWidth
|
||||
) {
|
||||
p1 = Path.getPointOnLine(
|
||||
glyphWidth,
|
||||
p0.x,
|
||||
p0.y,
|
||||
pathCmd.points[0],
|
||||
pathCmd.points[1],
|
||||
p0.x,
|
||||
p0.y
|
||||
);
|
||||
} else {
|
||||
pathCmd = undefined;
|
||||
}
|
||||
break;
|
||||
case 'A':
|
||||
var start = pathCmd.points[4];
|
||||
// 4 = theta
|
||||
var dTheta = pathCmd.points[5];
|
||||
// 5 = dTheta
|
||||
var end = pathCmd.points[4] + dTheta;
|
||||
|
||||
if (currentT === 0) {
|
||||
currentT = start + 0.00000001;
|
||||
} else if (glyphWidth > currLen) {
|
||||
// Just in case start is 0
|
||||
currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
|
||||
} else {
|
||||
currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
|
||||
}
|
||||
|
||||
// Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
|
||||
// Old code failed to render text along arc of this path: "M 50 50 a 150 50 0 0 1 250 50 l 50 0"
|
||||
if (
|
||||
(dTheta < 0 && currentT < end) ||
|
||||
(dTheta >= 0 && currentT > end)
|
||||
) {
|
||||
currentT = end;
|
||||
needNewSegment = true;
|
||||
}
|
||||
p1 = Path.getPointOnEllipticalArc(
|
||||
pathCmd.points[0],
|
||||
pathCmd.points[1],
|
||||
pathCmd.points[2],
|
||||
pathCmd.points[3],
|
||||
currentT,
|
||||
pathCmd.points[6]
|
||||
);
|
||||
break;
|
||||
case 'C':
|
||||
if (currentT === 0) {
|
||||
if (glyphWidth > pathCmd.pathLength) {
|
||||
currentT = 0.00000001;
|
||||
} else {
|
||||
currentT = glyphWidth / pathCmd.pathLength;
|
||||
}
|
||||
} else if (glyphWidth > currLen) {
|
||||
currentT += (glyphWidth - currLen) / pathCmd.pathLength / 2;
|
||||
} else {
|
||||
currentT = Math.max(
|
||||
currentT - (currLen - glyphWidth) / pathCmd.pathLength / 2,
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
if (currentT > 1.0) {
|
||||
currentT = 1.0;
|
||||
needNewSegment = true;
|
||||
}
|
||||
p1 = Path.getPointOnCubicBezier(
|
||||
currentT,
|
||||
pathCmd.start.x,
|
||||
pathCmd.start.y,
|
||||
pathCmd.points[0],
|
||||
pathCmd.points[1],
|
||||
pathCmd.points[2],
|
||||
pathCmd.points[3],
|
||||
pathCmd.points[4],
|
||||
pathCmd.points[5]
|
||||
);
|
||||
break;
|
||||
case 'Q':
|
||||
if (currentT === 0) {
|
||||
currentT = glyphWidth / pathCmd.pathLength;
|
||||
} else if (glyphWidth > currLen) {
|
||||
currentT += (glyphWidth - currLen) / pathCmd.pathLength;
|
||||
} else {
|
||||
currentT -= (currLen - glyphWidth) / pathCmd.pathLength;
|
||||
}
|
||||
|
||||
if (currentT > 1.0) {
|
||||
currentT = 1.0;
|
||||
needNewSegment = true;
|
||||
}
|
||||
p1 = Path.getPointOnQuadraticBezier(
|
||||
currentT,
|
||||
pathCmd.start.x,
|
||||
pathCmd.start.y,
|
||||
pathCmd.points[0],
|
||||
pathCmd.points[1],
|
||||
pathCmd.points[2],
|
||||
pathCmd.points[3]
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
if (p1 !== undefined) {
|
||||
currLen = Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
}
|
||||
|
||||
if (needNewSegment) {
|
||||
needNewSegment = false;
|
||||
pathCmd = undefined;
|
||||
// if possible use native browser method, otherwise use KonvaJS implementation
|
||||
if (typeof window !== 'undefined' && this.attrs.data) {
|
||||
try {
|
||||
return this.path.getPointAtLength(length);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
// try using KonvaJS implementation as a backup
|
||||
this.path = new Path({ data: this.attrs.data });
|
||||
return this.path.getPointAtLength(length);
|
||||
}
|
||||
} else {
|
||||
return this.path.getPointAtLength(length);
|
||||
}
|
||||
};
|
||||
|
||||
// fake search for offset, this is the best approach
|
||||
var testChar = 'C';
|
||||
var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
|
||||
var lettersInOffset = offset / glyphWidth - 1;
|
||||
// the idea is simple
|
||||
// try to draw testChar until we fill offset
|
||||
for (var k = 0; k < lettersInOffset; k++) {
|
||||
findSegmentToFitCharacter(testChar);
|
||||
if (p0 === undefined || p1 === undefined) {
|
||||
break;
|
||||
}
|
||||
p0 = p1;
|
||||
}
|
||||
|
||||
// Algorithm for calculating glyph positions:
|
||||
// 1. Get the begging point of the glyph on the path using the offsetToGlyph,
|
||||
// 2. Get the ending point of the glyph on the path using the offsetToGlyph plus glyph width,
|
||||
// 3. Calculate the rotation, width, and midpoint of the glyph using the start and end points,
|
||||
// 4. Add glyph width to the offsetToGlyph and repeat
|
||||
let offsetToGlyph = offset;
|
||||
for (var i = 0; i < charArr.length; i++) {
|
||||
// Find p1 such that line segment between p0 and p1 is approx. width of glyph
|
||||
findSegmentToFitCharacter(charArr[i]);
|
||||
const charStartPoint = getPointAtLength(offsetToGlyph);
|
||||
if (!charStartPoint) return;
|
||||
|
||||
if (p0 === undefined || p1 === undefined) {
|
||||
break;
|
||||
let glyphWidth = this._getTextSize(charArr[i]).width + letterSpacing;
|
||||
if (charArr[i] === ' ' && align === 'justify') {
|
||||
const numberOfSpaces = this.text().split(' ').length - 1;
|
||||
glyphWidth += (pathLength - textWidth) / numberOfSpaces;
|
||||
}
|
||||
|
||||
var width = Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
|
||||
const charEndPoint = getPointAtLength(offsetToGlyph + glyphWidth);
|
||||
|
||||
var kern = 0;
|
||||
const width = Path.getLineLength(
|
||||
charStartPoint.x,
|
||||
charStartPoint.y,
|
||||
charEndPoint.x,
|
||||
charEndPoint.y
|
||||
);
|
||||
|
||||
let kern = 0;
|
||||
if (kerningFunc) {
|
||||
try {
|
||||
// getKerning is a user provided getter. Make sure it never breaks our logic
|
||||
@ -471,28 +318,32 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
}
|
||||
}
|
||||
|
||||
p0.x += kern;
|
||||
p1.x += kern;
|
||||
charStartPoint.x += kern;
|
||||
charEndPoint.x += kern;
|
||||
this.textWidth += kern;
|
||||
|
||||
var midpoint = Path.getPointOnLine(
|
||||
const midpoint = Path.getPointOnLine(
|
||||
kern + width / 2.0,
|
||||
p0.x,
|
||||
p0.y,
|
||||
p1.x,
|
||||
p1.y
|
||||
charStartPoint.x,
|
||||
charStartPoint.y,
|
||||
charEndPoint.x,
|
||||
charEndPoint.y
|
||||
);
|
||||
|
||||
var rotation = Math.atan2(p1.y - p0.y, p1.x - p0.x);
|
||||
const rotation = Math.atan2(
|
||||
charEndPoint.y - charStartPoint.y,
|
||||
charEndPoint.x - charStartPoint.x
|
||||
);
|
||||
this.glyphInfo.push({
|
||||
transposeX: midpoint.x,
|
||||
transposeY: midpoint.y,
|
||||
text: charArr[i],
|
||||
rotation: rotation,
|
||||
p0: p0,
|
||||
p1: p1,
|
||||
p0: charStartPoint,
|
||||
p1: charEndPoint,
|
||||
});
|
||||
p0 = p1;
|
||||
|
||||
offsetToGlyph += glyphWidth;
|
||||
}
|
||||
}
|
||||
getSelfRect() {
|
||||
|
||||
135
test/text-paths.html
Normal file
135
test/text-paths.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>KonvaJS text paths</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="range" value="100" id="radius" min="1" max="1000" />
|
||||
<select id="align">
|
||||
<option value="center">center</option>
|
||||
<option value="left">left</option>
|
||||
<option value="right">right</option>
|
||||
</select>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<script type="module">
|
||||
import Konva from '../src/index.ts';
|
||||
|
||||
const stage = new Konva.Stage({
|
||||
container: 'container',
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
// define arc calculation
|
||||
// Credits to @opsb https://stackoverflow.com/a/18473154 for the polarToCartesian and describeArc functions
|
||||
const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => ({
|
||||
x: centerX + radius * Math.cos(((angleInDegrees - 90) * Math.PI) / 180),
|
||||
y: centerY + radius * Math.sin(((angleInDegrees - 90) * Math.PI) / 180),
|
||||
});
|
||||
const describeArc = (x, y, radius, startAngle, endAngle) => {
|
||||
const endAngleOriginal = endAngle;
|
||||
if (endAngleOriginal - startAngle === 360) {
|
||||
endAngle = 359;
|
||||
}
|
||||
const start = polarToCartesian(x, y, radius, endAngle);
|
||||
const end = polarToCartesian(x, y, radius, startAngle);
|
||||
const arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
|
||||
|
||||
return {
|
||||
data: [
|
||||
'M',
|
||||
start.x,
|
||||
start.y,
|
||||
'A',
|
||||
radius,
|
||||
radius,
|
||||
0,
|
||||
arcSweep,
|
||||
0,
|
||||
end.x,
|
||||
end.y,
|
||||
endAngleOriginal - startAngle === 360 ? 'z' : '',
|
||||
].join(' '),
|
||||
start,
|
||||
};
|
||||
};
|
||||
|
||||
// define constants
|
||||
const { data, start } = describeArc(0, 0, 100, 0, 360);
|
||||
const shiftX = 400;
|
||||
const shiftY = 200;
|
||||
const x = shiftX + start.x;
|
||||
const y = shiftX + start.y;
|
||||
|
||||
// create elements
|
||||
const text = new Konva.TextPath({
|
||||
x,
|
||||
y,
|
||||
text: 'Curved text with Konva.TextPath',
|
||||
align: 'center',
|
||||
data,
|
||||
fill: 'black',
|
||||
});
|
||||
const path = new Konva.Path({
|
||||
data,
|
||||
x,
|
||||
y,
|
||||
stroke: 'black',
|
||||
opacity: 0.3,
|
||||
});
|
||||
|
||||
// attach handlers
|
||||
document
|
||||
.querySelector('#align')
|
||||
.addEventListener('change', ({ target: { value } }) => {
|
||||
text.align(value);
|
||||
window.text = text;
|
||||
if (value === 'right') {
|
||||
text.rotation(180);
|
||||
} else if (value === 'left') {
|
||||
text.rotation(-180);
|
||||
} else {
|
||||
text.rotation(0);
|
||||
}
|
||||
});
|
||||
document
|
||||
.querySelector('#radius')
|
||||
.addEventListener('input', ({ target: { value } }) => {
|
||||
const { data, start } = describeArc(0, 0, value, 0, 360);
|
||||
const x = shiftX + start.x;
|
||||
const y = shiftX + start.y;
|
||||
|
||||
text.data(data);
|
||||
path.data(data);
|
||||
text.x(x);
|
||||
path.x(x);
|
||||
text.y(y);
|
||||
path.y(y);
|
||||
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
// add the shapes to the layer
|
||||
layer.add(text);
|
||||
layer.add(path);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -667,10 +667,15 @@ describe('Text', function () {
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
var trace =
|
||||
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 30px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Y,0,15);fillStyle=black;fillText(O,20.01,15);fillStyle=black;fillText(U,43.345,15);fillStyle=black;fillText( ,65.01,15);fillStyle=black;fillText(A,73.345,15);fillStyle=black;fillText(R,93.354,15);fillStyle=black;fillText(E,115.02,15);fillStyle=black;fillText( ,135.029,15);fillStyle=black;fillText(I,143.364,15);fillStyle=black;fillText(N,151.699,15);fillStyle=black;fillText(V,173.364,15);fillStyle=black;fillText(I,193.374,15);fillStyle=black;fillText(T,201.709,15);fillStyle=black;fillText(E,220.034,15);fillStyle=black;fillText(D,240.044,15);fillStyle=black;fillText(!,261.709,15);restore();restore();';
|
||||
let trace =
|
||||
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 30px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Y,0,15);fillStyle=black;fillText(O,20,15);fillStyle=black;fillText(U,43,15);fillStyle=black;fillText( ,65,15);fillStyle=black;fillText(A,73,15);fillStyle=black;fillText(R,93,15);fillStyle=black;fillText(E,115,15);fillStyle=black;fillText( ,135,15);fillStyle=black;fillText(I,143,15);fillStyle=black;fillText(N,151,15);fillStyle=black;fillText(V,173,15);fillStyle=black;fillText(I,193,15);fillStyle=black;fillText(T,201,15);fillStyle=black;fillText(E,220,15);fillStyle=black;fillText(D,240,15);fillStyle=black;fillText(!,261,15);restore();restore();';
|
||||
|
||||
assert.equal(layer.getContext().getTrace(), trace);
|
||||
if (!isBrowser) {
|
||||
trace =
|
||||
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 30px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Y,0,15);fillStyle=black;fillText(O,20,15);fillStyle=black;fillText(U,43,15);fillStyle=black;fillText( ,65,15);fillStyle=black;fillText(A,73,15);fillStyle=black;fillText(R,93,15);fillStyle=black;fillText(E,115,15);fillStyle=black;fillText( ,135,15);fillStyle=black;fillText(I,143,15);fillStyle=black;fillText(N,151,15);fillStyle=black;fillText(V,173,15);fillStyle=black;fillText(I,193,15);fillStyle=black;fillText(T,201,15);fillStyle=black;fillText(E,219,15);fillStyle=black;fillText(D,239,15);fillStyle=black;fillText(!,261,15);restore();restore();';
|
||||
}
|
||||
|
||||
assert.equal(layer.getContext().getTrace(false, true), trace);
|
||||
});
|
||||
|
||||
it('text multi line with justify align and several paragraphs', function () {
|
||||
|
||||
@ -277,7 +277,7 @@ describe('TextPath', function () {
|
||||
layer.add(textpath);
|
||||
stage.add(layer);
|
||||
|
||||
cloneAndCompareLayer(layer, 200);
|
||||
cloneAndCompareLayer(layer, 200, 10);
|
||||
});
|
||||
|
||||
it('Text path with letter spacing', function () {
|
||||
@ -757,9 +757,9 @@ describe('TextPath', function () {
|
||||
|
||||
// just different results in different envs
|
||||
if (isBrowser) {
|
||||
assert.equal(Math.round(rect.height), 329, 'check height');
|
||||
} else {
|
||||
assert.equal(Math.round(rect.height), 331, 'check height');
|
||||
} else {
|
||||
assert.equal(Math.round(rect.height), 333, 'check height');
|
||||
}
|
||||
|
||||
textpath.text('');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user