Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
How to scale a polygon without translating the polygon given a list of coordinates in javascript?

I have an array of coordinates [x1,y1, x2, y2 ....] which represents a polygon on a html canvas. I am drawing the polygon using KonvaJS. I am trying to retrieve the scaled coordinates for the polygon where [x1, y1, x2, y2 ...] is the scaled coordinates.

I have tried the following:

  1. Using JSTS https://github.com/bjornharrtell/jsts to add buffer to the coordinates. Followed this snippet http://jsfiddle.net/qdv1n4yL/7/ and tried in integrate into my react/typescript app and created the snippet as shown below function vectorCoordinates2JTS (polygon) { var coordinates: any = [];

    for (var i = 0; i < polygon.length; i++) {
        coordinates.push(new Coordinate(polygon[i].x, polygon[i].y));
    }
    return coordinates;
    }
    
    function inflatePolygon(poly, spacing) {
        var geoInput = vectorCoordinates2JTS(poly);
        geoInput.push(geoInput[0]);
    
        var geometryFactory = new GeometryFactory();
    
        var shell = geometryFactory.createPolygon(geoInput);
        var polygon = new BufferOp(poly);
        console.log(polygon.getResultGeometry())
    
        var inflatedCoordinates: any = [];
        var oCoordinates;
        oCoordinates = polygon.shell.points.coordinates;
        console.log(oCoordinates.length)
        for (let i = 0; i < oCoordinates.length; i++) {
            var oItem;
            oItem = oCoordinates[i];
            inflatedCoordinates.push(Math.ceil(oItem.x), Math.ceil(oItem.y));
        }
        return inflatedCoordinates;
    }
    

Here I am passing poly as [{x: 1, y:1}, {x:2, y:2}] and spacing as 1.5. It breaks on this line here polygon.getResultGeometry() with an error.

  1. Also tried using this library to get the transformed coordinates http://turfjs.org/docs/#transformScale but it returns me a bunch of coordinates which i cant seem to use and get my end result as just a simple list of scaled coordinates.

My overall requirements for solving this problem is the polygon should have a cushioning like buffer around the original polygon which can be used to detect collision. I was able to get the collision detection between the polygon and a point working but been stuck on adding the scale/buffer for the past few days. Any help or follow up questions to this problem is highly appreciated. Thanks!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!