twojs 动态路径 绘制心形线

原文链接: twojs 动态路径 绘制心形线

稍微有点瑕疵... 有点晕..今天就先这样吧, 这个方程是对的, 用两个sin两个圆拟合, 效果看这也还行

绘制心形线

1<template>
2  <div class="flex-row">
3    <div>twojs</div>
4    <div id="draw-shapes"></div>
5  </div>
6</template>
7
8<script lang="ts" setup>
9import Two from "two.js";
10import { onMounted } from "vue";
11const points: [number, number][] = [];
12
13// 心形线由两个sin和两个圆组成
14const size = 100;
15// sin(x)+1 [-pi/2, pi/2]
16for (let i = 0; i < size; i++) {
17  const x = (Math.PI / size) * i - Math.PI / 2;
18  const y = Math.sin(x) + 1;
19  points.push([x, y]);
20}
21
22// (x-pi/2)**2 + (y-1/2)**2
23for (let i = 0; i < size; i++) {
24  const dr = Math.PI / size;
25  const x = Math.PI / 2 + 1 * Math.sin(i * dr);
26  const y = 1 + 1 * Math.cos(i * dr);
27  points.push([x, y]);
28}
29// (x-pi/2)**2 + (y+1/2)**2
30for (let i = 0; i < size; i++) {
31  const dr = Math.PI / size;
32  const x = Math.PI / 2 + 1 * Math.sin(i * dr);
33  const y = -1 + 1 * Math.cos(i * dr);
34  points.push([x, y]);
35}
36
37// -sin(x)-1 [-pi/2, pi/2]
38for (let i = 0; i < size; i++) {
39  const x = Math.PI / 2 - (Math.PI / size) * i;
40  const y = -Math.sin(x) - 1;
41  points.push([x, y]);
42}
43console.error(
44  "x min max",
45  Math.min(...points.map((i) => i[0])),
46  Math.max(...points.map((i) => i[0]))
47);
48console.error(
49  "y min max",
50  Math.min(...points.map((i) => i[1])),
51  Math.max(...points.map((i) => i[1]))
52);
53onMounted(() => {
54  const elem = document.getElementById("draw-shapes");
55  const height = 800;
56  const width = 1000;
57  const params = {
58    width,
59    height,
60    autostart: true,
61    type: Two.Types.webgl,
62  };
63  const data = points.map(([a, b]) => {
64    const x = ((a + Math.PI / 2) * width) / 6;
65    const y = ((b / 2) * height) / 2 + height / 2;
66    // return [x, y];
67    return [y / 2, height / 2 - x / 2];
68  });
69
70  const two = new Two(params).appendTo(elem);
71  const path = two.makePath(
72    data[0][0],
73    data[0][1],
74    data[1][0],
75    data[1][1],
76    true,
77    false,
78    true
79  );
80  let start = 2;
81  const h = setInterval(() => {
82    console.log(Two.Commands);
83    if (start >= data.length) {
84      clearInterval(h);
85      return;
86    }
87    const p = new Two.Anchor(data[start][0], data[start][1], Two.Commands.line);
88    console.log("p", p);
89    // M._commond ='L'
90    // M.command = Two.Commands.line;
91    // path.vertices.splice(0, 0, M);
92    // path.position.add(200, 300);
93    start++;
94    path.vertices.push(p);
95    two.update();
96  }, 100);
97});
98</script>
99
100<style></style>