scale SVG pathPoints

Question

I am scaling a polygon and set the actual scaled points into the pathArray

const pointsCal = this.findPoints(allocatedTable.tableType.shape.pathArray);//calculating max x,y min x,y of pathArray const diameterX = (pointsCal.highX - pointsCal.lowX)/2; const diameterY = (pointsCal.highY - pointsCal.lowX)/2; const scalex = (diameterX + this.settings.tableTableSpace) / diameterX; const scaleY = (diameterY + this.settings.tableTableSpace) / diameterY; pathArray.forEach((point) => { if (point.command !== 'z') { point.x -= tableCenterPoint.x; point.y -= tableCenterPoint.y; point.x *= scalex; point.y *= scaleY; point.x += tableCenterPoint.x; point.y += tableCenterPoint.y;[enter image description here][1] } });

but for the regular rectangle it is working properly but for the rotated Shapes it is not scling propely

I think I had made a mistake in logic in calculating scale X and scaleY value

Paul LeBeau · Accepted Answer · 2019-12-18 07:05:07Z

Why the divide by 2?

Try something like this:

const width = pointsCal.highX - pointsCal.lowX; const height = pointsCal.highY - pointsCal.lowY; const scalex = this.settings.tableTableSpace / width; const scaleY = this.settings.tableTableSpace / height;

If that doesn't work, then you'll need to provide a minimal workable example

Update

I'm still not 100% sure what you want. But looking at the code, I assume you are wanting to scale the original shape so that it fills the SVG. But also allowing for some padding around it.

If so, you'll want to do something like this:

 DrawScalledRectangle() { // Get the size of the original polygon const bbox = this.tableGroup.getBBox(); // Get the size of the <svg> element. // This will be the value at the time this function is run. But the <svg> has width // and height of "100%" so it may change if the window is resized. const mainSvg = document.getElementById("mainSVG"); const svgWidth = mainSvg.clientWidth; const svgHeight = mainSvg.clientHeight; // The scale will be svgSize / originalSize (but we subtract the padding from the svgSize first) const scaleX = (svgWidth - this.tableTableSpace * 2) / bbox.width; const scaleY = (svgHeight- this.tableTableSpace * 2) / bbox.height; this.pathArray.forEach(point => { if (point.command !== "z") { // New point location = padding + (oldPoint - shapePosition) * scale point.x = this.tableTableSpace + (point.x - bbox.x) * scaleX; point.y = this.tableTableSpace + (point.y - bbox.y) * scaleY; } }); console.log(this.pathArray); ...snip... }

https://stackblitz.com/edit/angular-thb9w5?file=src/app/app.component.ts

thank you, can you help with why we subtract y value from X value for heightconst height = pointsCal.highY - pointsCal.low;
That's a typo, from your original code, that I missed. I have fixed it now.
stackblitz.com/edit/angular-z3ivot, as you asked me, have simplified the code but the above logic is not working for me can you help me to scale uniformly
thank you so much but I need to set the shape into the CenterPoint of shape that is scalled,then the padding will be same for all edges of the shape

Collectives™ on Stack Overflow

scale SVG pathPoints

1 Answer 1

13 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Related