Fix path.getClientRect() calculations for Konva.Path

This commit is contained in:
Anton Lavrenov
2019-11-14 11:18:12 -05:00
parent 67d5e362e8
commit af45808d07
5 changed files with 77 additions and 6 deletions

View File

@@ -1169,6 +1169,56 @@ suite('Path', function() {
layer.add(path);
var rect = path.getClientRect();
assert.deepEqual(rect, { x: -4, y: -3, width: 107, height: 124 });
var back = new Konva.Rect({
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
stroke: 'red'
});
layer.add(back);
layer.draw();
assert.deepEqual(rect, {x: 8, y: 65, width: 95, height: 56});
});
test('getClientRect for arc', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var path = new Konva.Path({
data:
'M -12274.95703125 17975.16015625 C -12271.4072265625 17975.16015625 -12268.017578125 17974.345703125 -12264.8837890625 17972.740234375 C -12261.892578125 17971.208984375 -12259.24609375 17968.97265625 -12257.2314453125 17966.2734375 L -12256.775390625 17965.662109375 L -12256.0654296875 17965.939453125 C -12253.494140625 17966.947265625 -12250.7783203125 17967.45703125 -12247.9921875 17967.45703125 C -12245.01171875 17967.45703125 -12242.1201171875 17966.873046875 -12239.396484375 17965.720703125 C -12236.765625 17964.607421875 -12234.4013671875 17963.013671875 -12232.3701171875 17960.982421875 C -12230.3388671875 17958.953125 -12228.7431640625 17956.587890625 -12227.62890625 17953.95703125 C -12226.4755859375 17951.232421875 -12225.890625 17948.337890625 -12225.890625 17945.35546875 C -12225.890625 17941.30859375 -12226.99609375 17937.349609375 -12229.0888671875 17933.90625 C -12231.12109375 17930.5625 -12234.01171875 17927.802734375 -12237.447265625 17925.927734375 L -12237.849609375 17925.708984375 L -12237.9462890625 17925.26171875 C -12238.99609375 17920.408203125 -12241.708984375 17915.994140625 -12245.5830078125 17912.83203125 C -12247.5146484375 17911.2578125 -12249.6748046875 17910.029296875 -12252.0068359375 17909.18359375 C -12254.41796875 17908.306640625 -12256.9541015625 17907.86328125 -12259.54296875 17907.86328125 C -12263.171875 17907.86328125 -12266.7568359375 17908.75390625 -12269.9111328125 17910.44140625 L -12270.556640625 17910.78515625 L -12271.0810546875 17910.275390625 C -12275.2353515625 17906.2265625 -12280.7138671875 17903.99609375 -12286.5078125 17903.99609375 C -12288.9462890625 17903.99609375 -12291.34375 17904.390625 -12293.630859375 17905.171875 C -12295.84375 17905.92578125 -12297.916015625 17907.0234375 -12299.791015625 17908.4375 C -12301.646484375 17909.8359375 -12303.2646484375 17911.509765625 -12304.599609375 17913.41015625 C -12305.9541015625 17915.3359375 -12306.984375 17917.44921875 -12307.6640625 17919.69140625 L -12307.8193359375 17920.203125 L -12308.3310546875 17920.359375 C -12310.5712890625 17921.0390625 -12312.6826171875 17922.068359375 -12314.6044921875 17923.421875 C -12316.501953125 17924.755859375 -12318.1708984375 17926.37109375 -12319.56640625 17928.224609375 C -12322.466796875 17932.078125 -12324 17936.671875 -12324 17941.51171875 C -12324 17944.498046875 -12323.416015625 17947.392578125 -12322.2646484375 17950.1171875 C -12321.15234375 17952.75 -12319.55859375 17955.11328125 -12317.529296875 17957.142578125 C -12315.5 17959.171875 -12313.1376953125 17960.765625 -12310.505859375 17961.876953125 C -12307.7822265625 17963.029296875 -12304.8876953125 17963.61328125 -12301.90234375 17963.61328125 C -12299.7900390625 17963.61328125 -12297.71875 17963.322265625 -12295.744140625 17962.74609375 L -12294.95703125 17962.517578125 L -12294.578125 17963.24609375 C -12292.7373046875 17966.78125 -12289.9716796875 17969.759765625 -12286.580078125 17971.861328125 C -12283.095703125 17974.01953125 -12279.076171875 17975.16015625 -12274.95703125 17975.16015625 M -12274.95703125 17976.16015625 C -12283.8671875 17976.16015625 -12291.609375 17971.11328125 -12295.46484375 17963.70703125 C -12297.50390625 17964.30078125 -12299.66796875 17964.61328125 -12301.90234375 17964.61328125 C -12314.6640625 17964.61328125 -12325 17954.27734375 -12325 17941.51171875 C -12325 17931.08203125 -12318.1015625 17922.27734375 -12308.62109375 17919.40234375 C -12305.74609375 17909.91015625 -12296.92578125 17902.99609375 -12286.5078125 17902.99609375 C -12280.234375 17902.99609375 -12274.54296875 17905.50390625 -12270.3828125 17909.55859375 C -12267.15234375 17907.83203125 -12263.46484375 17906.86328125 -12259.54296875 17906.86328125 C -12248.48046875 17906.86328125 -12239.21875 17914.65234375 -12236.96875 17925.05078125 C -12229.78125 17928.97265625 -12224.890625 17936.58984375 -12224.890625 17945.35546875 C -12224.890625 17958.11328125 -12235.25 17968.45703125 -12247.9921875 17968.45703125 C -12250.96875 17968.45703125 -12253.81640625 17967.89453125 -12256.4296875 17966.87109375 C -12260.640625 17972.51171875 -12267.37109375 17976.16015625 -12274.95703125 17976.16015625 Z',
fill: 'black',
stroke: 'blue',
strokeWidth: 10
});
layer.add(path);
var rect = path.getClientRect();
var scale = stage.height() / rect.height / 2;
path.x(-rect.x * scale);
path.y(-rect.y * scale);
path.scaleX(scale);
path.scaleY(scale);
rect = path.getClientRect();
var back = new Konva.Rect({
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
stroke: 'red'
});
layer.add(back);
layer.draw();
assert.deepEqual(rect, {x: 0, y: 0, width: 132.53012048192795, height: 100});
});
});