mirror of
https://github.com/konvajs/konva.git
synced 2026-01-22 21:02:26 +08:00
fix: keep one impl for node and browser
This commit is contained in:
gtktsc
@@ -11,6 +11,7 @@ import {
|
||||
cloneAndCompareLayer,
|
||||
isNode,
|
||||
assertAlmostDeepEqual,
|
||||
isBrowser,
|
||||
} from './test-utils';
|
||||
|
||||
describe('Path', function () {
|
||||
@@ -1082,59 +1083,186 @@ describe('Path', function () {
|
||||
it('get point at path', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
const data =
|
||||
'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150';
|
||||
var path = new Konva.Path({
|
||||
stroke: 'red',
|
||||
strokeWidth: 3,
|
||||
data: 'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150',
|
||||
data,
|
||||
});
|
||||
layer.add(path);
|
||||
if (isBrowser) {
|
||||
const SVGPath = document.createElementNS(
|
||||
'http://www.w3.org/2000/svg',
|
||||
'path'
|
||||
) as SVGPathElement;
|
||||
SVGPath.setAttribute('d', data);
|
||||
for (var i = 0; i < path.getLength(); i += 1) {
|
||||
var p = path.getPointAtLength(i);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
radius: 2,
|
||||
fill: 'black',
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(circle);
|
||||
const position = SVGPath.getPointAtLength(i);
|
||||
assert(
|
||||
Math.abs(p.x / position.x) >= 0.8,
|
||||
'error should be smaller than 10%'
|
||||
);
|
||||
assert(
|
||||
Math.abs(p.y / position.y) >= 0.8,
|
||||
'error should be smaller than 10%'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
var points = [];
|
||||
for (var i = 0; i < path.getLength(); i += 20) {
|
||||
var p = path.getPointAtLength(i);
|
||||
points.push(p);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
radius: 2,
|
||||
fill: 'black',
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(circle);
|
||||
}
|
||||
|
||||
var points = [];
|
||||
for (var i = 0; i < path.getLength(); i += 20) {
|
||||
var p = path.getPointAtLength(i);
|
||||
points.push(p);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
radius: 2,
|
||||
fill: 'black',
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(circle);
|
||||
assert.deepEqual(points, [
|
||||
{ x: 300, y: 10 },
|
||||
{ x: 290.2871413779118, y: 27.48314552325543 },
|
||||
{ x: 280.57428275582356, y: 44.96629104651086 },
|
||||
{ x: 270.86142413373534, y: 62.4494365697663 },
|
||||
{ x: 261.1485655116471, y: 79.93258209302172 },
|
||||
{ x: 251.43570688955887, y: 97.41572761627717 },
|
||||
{ x: 230.89220826660141, y: 87.23996356219386 },
|
||||
{ x: 207.0639321224534, y: 74.08466390481559 },
|
||||
{ x: 182.87529785963875, y: 63.52674972743341 },
|
||||
{ x: 159.56025996483157, y: 56.104820499018956 },
|
||||
{ x: 138.30820744216845, y: 52.197497135977514 },
|
||||
{ x: 120.20328854394192, y: 52.00410710518156 },
|
||||
{ x: 106.16910423342256, y: 55.53451596967142 },
|
||||
{ x: 96.92159177720502, y: 62.60862410865827 },
|
||||
{ x: 92.93250205472883, y: 72.86555428606191 },
|
||||
{ x: 94.40533374670959, y: 85.78206137467119 },
|
||||
{ x: 101.26495209131289, y: 100.69922508568548 },
|
||||
{ x: 113.1614217949117, y: 116.85606400569954 },
|
||||
{ x: 129.4878585660311, y: 133.42835616090537 },
|
||||
{ x: 149.41138859764925, y: 149.5706857234721 },
|
||||
{ x: 159.43138712714935, y: 133.06025615594774 },
|
||||
{ x: 175.3017710206886, y: 122.31378864213205 },
|
||||
{ x: 194.92856277944335, y: 115.73314636675508 },
|
||||
{ x: 214.84499816899648, y: 112.85265466076682 },
|
||||
{ x: 234.86585690487928, y: 112.83275701234302 },
|
||||
{ x: 254.65745479392615, y: 115.6401774356189 },
|
||||
{ x: 273.58108654098885, y: 121.79846344304384 },
|
||||
{ x: 289.93157588171135, y: 132.43782950384232 },
|
||||
{ x: 299.87435436448743, y: 149.4028482225714 },
|
||||
]);
|
||||
}
|
||||
|
||||
assert.deepEqual(points, [
|
||||
{ x: 300, y: 10 },
|
||||
{ x: 290.2871413779118, y: 27.48314552325543 },
|
||||
{ x: 280.57428275582356, y: 44.96629104651086 },
|
||||
{ x: 270.86142413373534, y: 62.4494365697663 },
|
||||
{ x: 261.1485655116471, y: 79.93258209302172 },
|
||||
{ x: 251.43570688955887, y: 97.41572761627717 },
|
||||
{ x: 230.89220826660141, y: 87.23996356219386 },
|
||||
{ x: 207.0639321224534, y: 74.08466390481559 },
|
||||
{ x: 182.87529785963875, y: 63.52674972743341 },
|
||||
{ x: 159.56025996483157, y: 56.104820499018956 },
|
||||
{ x: 138.30820744216845, y: 52.197497135977514 },
|
||||
{ x: 120.20328854394192, y: 52.00410710518156 },
|
||||
{ x: 106.16910423342256, y: 55.53451596967142 },
|
||||
{ x: 96.92159177720502, y: 62.60862410865827 },
|
||||
{ x: 92.93250205472883, y: 72.86555428606191 },
|
||||
{ x: 94.40533374670959, y: 85.78206137467119 },
|
||||
{ x: 101.26495209131289, y: 100.69922508568548 },
|
||||
{ x: 113.1614217949117, y: 116.85606400569954 },
|
||||
{ x: 129.4878585660311, y: 133.42835616090537 },
|
||||
{ x: 149.41138859764925, y: 149.5706857234721 },
|
||||
{ x: 157.23649735164412, y: 135.43198059754286 },
|
||||
{ x: 171.63472376239991, y: 124.16936108372946 },
|
||||
{ x: 191.0783332798296, y: 116.67529781728555 },
|
||||
{ x: 213.53990876948748, y: 112.94979079821127 },
|
||||
{ x: 236.99203309692777, y: 112.99284002650663 },
|
||||
{ x: 259.4072891277046, y: 116.80444550217156 },
|
||||
{ x: 278.75825972737204, y: 124.3846072252061 },
|
||||
{ x: 293.0175277614844, y: 135.7333251956102 },
|
||||
]);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
it('get point at path - bezier', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
const data =
|
||||
'M100,250 q150,-150 300,0 M 117.12814070351759 108.66938206658291 C 79.18719346733668 277.73956799623113 75.85761180904522 379.96743797110554 82.84673366834171 395.7761659861809 S 148.83130025125627 280.47708118718595 177.12060301507537 244.36661824748745 S 326.1725898241206 61.02036887562815 325.67336683417085 85.815110709799 S 174.998726758794 435.7304316896985 172.8354271356784 457.1970202575377 S 273.65633103015074 310.01551271984926 307.1042713567839 270.07767352386935 S 466.09929459798997 92.08432302135678 459.9422110552764 114.3829499057789 S 266.23512060301505 435.5226006595478 254.2537688442211 461.4821961369347 S 328.1430565326633 368.1639210113065 357.09798994974875 337.2120956344221 S 486.31961118090453 207.61623570979899 502.79396984924625 195.8012916143216 S 511.48859170854274 200.85065719221106 498.50879396984925 235.79626648869348 S 379.73086055276383 489.4401119660804 391.37939698492465 495.76360317211055 S 573.2022663316583 313.03941849874377 598.4962311557789 290.0751609610553 S 608.3285672110553 288.6610529208543 608.4949748743719 298.64551271984925 S 604.9168530150754 352.64801334799 599.9246231155779 375.778678548995 S 540.6820665829146 508.5077162374372 565.643216080402 497.19199513190955 S 690.3761155778894 408.77881799623117 814.1834170854271 278.6480252826633';
|
||||
var path = new Konva.Path({
|
||||
stroke: 'red',
|
||||
strokeWidth: 3,
|
||||
data,
|
||||
});
|
||||
layer.add(path);
|
||||
if (isBrowser) {
|
||||
const SVGPath = document.createElementNS(
|
||||
'http://www.w3.org/2000/svg',
|
||||
'path'
|
||||
) as SVGPathElement;
|
||||
SVGPath.setAttribute('d', data);
|
||||
for (var i = 0; i < path.getLength(); i += 1) {
|
||||
var p = path.getPointAtLength(i);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
radius: 2,
|
||||
fill: 'black',
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(circle);
|
||||
const position = SVGPath.getPointAtLength(i);
|
||||
assert(
|
||||
Math.abs(p.x / position.x) >= 0.8,
|
||||
'error should be smaller than 10%'
|
||||
);
|
||||
assert(
|
||||
Math.abs(p.y / position.y) >= 0.8,
|
||||
'error should be smaller than 10%'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
var points = [];
|
||||
for (var i = 0; i < path.getLength(); i += 100) {
|
||||
var p = path.getPointAtLength(i);
|
||||
points.push(p);
|
||||
var circle = new Konva.Circle({
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
radius: 2,
|
||||
fill: 'black',
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(circle);
|
||||
}
|
||||
console.log(points);
|
||||
|
||||
assert.deepEqual(points, [
|
||||
{ x: 100, y: 250 },
|
||||
{ x: 183.49257326906178, y: 189.74412603457034 },
|
||||
{ x: 281.0151908091271, y: 178.20647353642187 },
|
||||
{ x: 366.7132913762265, y: 220.40664127957314 },
|
||||
{ x: 105.49453421722073, y: 163.7109030937208 },
|
||||
{ x: 88.80979830887104, y: 261.9310198815103 },
|
||||
{ x: 80.0187270730884, y: 357.83046559509427 },
|
||||
{ x: 117.93714733252399, y: 346.99459027920284 },
|
||||
{ x: 166.1370633980933, y: 260.4358051093468 },
|
||||
{ x: 227.98754443852883, y: 182.09507003542205 },
|
||||
{ x: 296.17215373535686, y: 105.30891997028526 },
|
||||
{ x: 305.3161348059441, y: 142.9460142538079 },
|
||||
{ x: 267.2661704645427, y: 232.6860656778539 },
|
||||
{ x: 227.16050436878314, y: 324.94655835229406 },
|
||||
{ x: 185.65639171348846, y: 422.04089877316545 },
|
||||
{ x: 207.5911710830848, y: 414.96086124898176 },
|
||||
{ x: 264.3047848379108, y: 330.13969208207294 },
|
||||
{ x: 321.18170383159446, y: 253.6870726749278 },
|
||||
{ x: 390.329571545151, y: 177.42471959238998 },
|
||||
{ x: 459.92552663143755, y: 114.44249046700436 },
|
||||
{ x: 410.01622229664224, y: 202.72024124427364 },
|
||||
{ x: 357.81453859627857, y: 288.9701212069797 },
|
||||
{ x: 306.5051917255263, y: 373.1829146355453 },
|
||||
{ x: 254.45611263495965, y: 461.05257532017424 },
|
||||
{ x: 311.64470317120777, y: 393.1486428786611 },
|
||||
{ x: 374.86125434742394, y: 318.78396882819396 },
|
||||
{ x: 448.98895550268287, y: 245.379089552074 },
|
||||
{ x: 509.82250467838867, y: 204.94802938217413 },
|
||||
{ x: 470.0769294556105, y: 300.3644863201298 },
|
||||
{ x: 427.5177926499756, y: 395.04577445277806 },
|
||||
{ x: 392.21257855027216, y: 483.8201732191269 },
|
||||
{ x: 457.15548210720317, y: 437.6905086420308 },
|
||||
{ x: 523.8003177586382, y: 368.10021407147605 },
|
||||
{ x: 593.340769055968, y: 295.0305015759889 },
|
||||
{ x: 603.653217505318, y: 353.4806817624205 },
|
||||
{ x: 572.3287288437606, y: 447.38305323763467 },
|
||||
{ x: 602.8355141088527, y: 472.68660858157966 },
|
||||
{ x: 682.2552228873318, y: 406.8842711481312 },
|
||||
{ x: 754.9298687762096, y: 338.83102136000986 },
|
||||
]);
|
||||
}
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
|
||||
@@ -757,9 +757,9 @@ describe('TextPath', function () {
|
||||
|
||||
// just different results in different envs
|
||||
if (isBrowser) {
|
||||
assert.equal(Math.round(rect.height), 331, 'check height');
|
||||
assert.equal(Math.round(rect.height), 330, 'check height');
|
||||
} else {
|
||||
assert.equal(Math.round(rect.height), 333, 'check height');
|
||||
assert.equal(Math.round(rect.height), 332, 'check height');
|
||||
}
|
||||
|
||||
textpath.text('');
|
||||
@@ -807,7 +807,11 @@ describe('TextPath', function () {
|
||||
|
||||
var rect = textpath.getClientRect();
|
||||
assert.equal(Math.round(rect.width), 299);
|
||||
assert.equal(Math.round(rect.height), 171);
|
||||
if (isBrowser) {
|
||||
assert.equal(Math.round(rect.height), 171);
|
||||
} else {
|
||||
assert.equal(Math.round(rect.height), 170);
|
||||
}
|
||||
});
|
||||
|
||||
it.skip('check vertical text path', function () {
|
||||
|
||||
Reference in New Issue
Block a user