xaviergonz / js-angusj-clipper

Polygon and line clipping and offsetting library (Javascript) - a port of Angus Johnson's clipper
MIT License
162 stars 19 forks source link

Usage with Line & Polygon #31

Open MentalGear opened 1 year ago

MentalGear commented 1 year ago

First: thanks for this handy and super speedy library!

I'd appreciate an example in the docs on how to do clipping of a Line and a Polygone as I'm not that knowledgeable in vector graphics (yet).

Specifically, I'd like like to clip a Line (open path) from a user-defined Polygon (rectangle, but can also be more complex polygon with holes).

Here's what I tried, and I would much appreciate some hints on how to do this correctly.

import * as clipperLib from "js-angusj-clipper"; // es6 / typescript

async function mainAsync() {
  // create an instance of the library (usually only do this once in your app)
  const clipper = await clipperLib.loadNativeClipperLibInstanceAsync(
    // let it autodetect which one to use, but also available WasmOnly and AsmJsOnly
    clipperLib.NativeClipperLibRequestedFormat.WasmWithAsmJsFallback
  );

  const line = [
    { x: 10, y: 10 },
    { x: 50, y: 50 },
    { x: 100, y: 100 }
  ];

  const rect = [
    { x: 25, y: 25 },
    { x: 25, y: 75 },
    { x: 75, y: 75 },
    { x: 75, y: 25 }
  ];

  const polyResult = clipper.clipToPaths({
    clipType: clipperLib.ClipType.Union,

    subjectInputs: [{ data: rect, closed: true }],

    clipInputs: [{ data: line, closed: false }],

    subjectFillType: clipperLib.PolyFillType.EvenOdd
  });

  console.log("polyResult", polyResult);
}

mainAsync();