svg-path-commanderライブラリを使った多角形の1辺を指定した数で按分する方法について

こんにちわ。nap5です。

svg-path-commanderライブラリを使った多角形の辺を指定した数で按分する方法について紹介したいと思います。

今回は達成した表現があってそれを生む過程で気づいたので、備忘禄がてら書き残したいと思います。

svg-path-commanderライブラリはこちらになります。

GitHub - thednp/svg-path-commander: ES6+ tools for advanced processing of SVG path data.

補間値生成用に以下のsamplesメソッドも使用しています。

API Reference · culori

今回のプログラムです。

import { samples } from "culori";
import SVGPathCommander from "svg-path-commander";

const makePath = ({ points }) => {
  let path = `M ${points[0][0]},${points[0][1]}`;
  for (let i = 1; i < points.length; i++) {
    path = path + ` L ${points[i][0]},${points[i][1]}`;
  }
  path = path + ` Z`;
  return path;
};

const buildPoints = ({ edgeCount }) => {
  const stepSize = (Math.PI * 2) / edgeCount;
  return [...Array(edgeCount)].map((_, edgeIndex) => {
    return [Math.cos(edgeIndex * stepSize), Math.sin(edgeIndex * stepSize)];
  });
};

const createBreakPoints = ({ instance, edgeCount, breakCount }) => {
  const tList = samples(edgeCount + 1 + edgeCount * breakCount);
  const length = instance.getTotalLength();
  const resultList = [];
  for (let index = 0; index < tList.length; index++) {
    const t = tList[index];
    const { x, y } = instance.getPointAtLength(t * length);
    resultList.push([x, y]);
  }
  return resultList;
};

const rotate = 30;
const breakCount = 2;
const edgeCount = 3;

const points = buildPoints({ edgeCount });
const path = makePath({ points });
const instance = new SVGPathCommander(path).transform({ rotate });
const breakPoints = createBreakPoints({ instance, edgeCount, breakCount });
const nicePath = makePath({
  points: breakPoints,
});
console.log(nicePath);

辺の数が3つ、按分点が2個、時計回り30度回転の場合の実行結果は以下になります。

$ time node index.js
M 0.899519052838329,0.3750000000000001 L 0.32216878364870327,0.37500000000000017 L -0.25518148554092246,0.3750000000000003 L -0.8325317547305482,0.37500000000000033 L -0.5438566201357355,-0.12499999999999978 L -0.2551814855409227,-0.6250000000000003 L 0.033493649053889796,-1.125 L 0.322168783648703,-0.6249999999999998 L 0.6108439182435159,-0.12500000000000022 L 0.899519052838329,0.3750000000000001 Z

real    0m0.255s
user    0m0.299s
sys     0m0.058s

実行結果のsvgパスコマンドをsvg-path-editorに張り付けて確認します。

1つの辺に2個の点がありますね。

辺の数が3つ、按分点が2個、時計回り30度回転

按分点を4個にした場合は以下になります。

1つの辺に4個の点がありますね。

辺の数が3つ、按分点が4個、時計回り30度回転

図形的に見ればあまり変化ないですが、オリジナルな座標リストに按分点の座標を込みで取得できるので、便利だなーと思ったのでした。

いろんな多角形で1つの辺を按分してみてもいいかもしれませんね。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。