svg-path-commanderライブラリを使った多角形の1辺を指定した数で按分する方法について
こんにちわ。nap5です。
svg-path-commanderライブラリを使った多角形の辺を指定した数で按分する方法について紹介したいと思います。
今回は達成した表現があってそれを生む過程で気づいたので、備忘禄がてら書き残したいと思います。
svg-path-commanderライブラリはこちらになります。
補間値生成用に以下のsamplesメソッドも使用しています。
今回のプログラムです。
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個の点がありますね。
按分点を4個にした場合は以下になります。
1つの辺に4個の点がありますね。
図形的に見ればあまり変化ないですが、オリジナルな座標リストに按分点の座標を込みで取得できるので、便利だなーと思ったのでした。
いろんな多角形で1つの辺を按分してみてもいいかもしれませんね。
最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?