LeaferJS ”画龙点睛“ 小游戏开发指南
简介
LeaferJS 是一款好用的 Canvas 渲染引擎,提供革新的体验。可用于高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。
一、准备 Cloud Studio 代码运行环境
Playground 环境: https://www.leaferjs.com/ui/guide/runtime.html
通过 Cloud Studio 模版创建一个 LeaferJS 项目,用于运行、练习后续的示例代码。
二、学习 LeaferJS 入门教程
入门教程: https://www.leaferjs.com/ui/guide/basic/app.html
跟随官网教程步骤(文档底部有下一步引导按钮)从浅到深的一步步学习。
建议将教程中的示例代码复制到 LeaferJS 项目 的 index.ts 文件中运行、调试效果。
三、如何开发一个【画龙点睛】的小游戏 (参考示例)
主要步骤
视频讲解(约 10 分钟): https://www.bilibili.com/video/BV1VmyXYoE5d
- 准备龙的飞行路径,可通过鼠标绘制或自动生成(需要自定义)。
import { Leafer, DragEvent, Line, IPointData } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const points: IPointData[] = [] // 收集绘画坐标
const line = new Line({ stroke: 'black', strokeWidth: 10, points })
leafer.add(line)
// 绘制一条首尾相连的路径用来做飞行路径
leafer.on([DragEvent.START, DragEvent.DRAG], (e: DragEvent) => {
const point = e.getInnerPoint(line)
points.push(point)
line.points = points
})
leafer.on(DragEvent.END, () => {
console.log(JSON.stringify(points)) // 打印坐标到控制台备用
})
- 绘制龙,包括龙头(无眼睛)、龙身、龙爪、龙尾,并放到飞行路径上。
绘制龙的所需物料:
// 龙头路径
export const headPath = 'M0 0L0 0M200 200L200 200M74.1855 63.3709C75.1589 64.168 76.8372 65.6506 78.9408 67.6064C81.9675 70.43 83.0004 72.3608 87.2054 74.3892C90.3116 75.9016 91.3793 76.1933 91.1018 75.4308C90.9841 75.1073 90.0688 73.8442 87.4464 70.3239L85.9771 68.3727C84.6934 65.7777 83.7306 63.8315 83.0887 62.534C82.9165 62.1858 69.1398 55.7125 64.9891 53.3816C64.0715 52.8663 65.4785 52.4959 67.0752 53.3816C68.1396 53.9721 72.8883 55.832 81.3213 58.9615C80.6506 57.0428 79.5101 55.7717 75.8797 51.3107C74.2168 49.2673 66.0944 47.8197 64.9891 46.1868C64.1681 44.9739 74.6499 49.5643 74.5285 48.5311C74.2037 45.7686 72.2119 43.4112 69.1918 40.4042C66.1718 37.3973 60.1817 31.6662 63.7455 33.337C63.764 33.372 70.3842 39.9846 70.4096 40.0286C70.996 41.0414 74.3102 44.4099 76.9483 48.3723C77.1512 48.6771 76.8296 47.4044 76.9223 45.435C77.056 42.594 75.5547 37.9273 75.8797 37.8856C75.8997 37.8831 77.4989 42.7137 77.9191 46.1868C78.3229 49.5248 79.8318 52.6837 80.0867 53.0629C81.9378 55.8169 83.7416 58.4788 85.107 60.4675C86.2075 62.0704 83.9637 56.1478 84.2896 56.5721C84.7647 57.2004 88.3497 64.947 88.8982 65.6065C91.4487 68.6729 94.4951 71.764 95.2611 71.9805C95.9627 72.17 95.9309 71.318 95.2161 69.3539C94.6866 67.8993 93.0804 62.0049 90 56.5721C89.8003 56.22 86.6555 55.8776 83.5523 53.924C80.8306 52.2106 78.6291 49.6353 78.4437 49.327C78.3965 49.2483 78.2744 48.8025 78.9408 49.327C80.2001 50.3181 82.7616 52.0055 84.6496 52.9511C86.8905 54.0735 88.5724 53.5569 88.4641 53.3816C87.4428 51.7274 86.3881 50.1 85.3823 48.5517C85.2112 48.2884 78.0869 44.4894 77.9191 44.2309C77.7141 43.9151 84.8485 46.4945 84.6496 46.1869C83.7337 44.7695 82.9719 41.915 81.3213 40.0286C78.6771 37.0064 75.0912 34.9614 75.016 33.9452C74.973 33.3942 78.4941 34.8419 81.3213 37.8856C83.5598 40.2955 85.0212 44.2004 86.3371 45.435C86.97 46.0287 85.655 39.3967 86.3371 40.4042C87.3689 41.9282 86.6537 45.0776 87.7091 47.7944C88.109 48.8238 87.7515 48.1623 89.2115 50.9455C89.7777 52.0247 89.3365 50.057 89.2582 48.5517C89.1346 46.175 89.1108 43.3845 89.2582 43.6341C89.5698 44.1616 90.5474 53.2276 90.8634 53.7287C92.3671 56.113 93.4547 58.1169 93.8384 58.9615C96.5111 64.8447 100.453 70.1168 102.619 72.5211C104.25 74.361 106.202 74.5314 105.47 72.5211C104.024 68.5467 100.879 61.2742 101.275 60.5544C101.559 60.0845 101.615 60.1688 102.968 62.8428C105.903 68.6828 107.863 71.6331 111.581 75.8011C113.495 77.9307 114.043 78.2546 116.181 78.497C117.978 78.7065 119.063 79.2537 121.233 80.9759C122.027 81.6288 123.115 82.2535 123.755 82.413C126.31 83.1056 128.443 83.8209 129.055 84.2521C129.536 84.6004 129.833 85.0681 130.189 86.116L130.671 87.5106L131.647 87.5482C132.161 87.5704 133.916 89.2551 135.516 89.0649C139.162 88.6538 141.503 89.6542 143.142 88.2466C143.756 87.7091 144.289 87.2272 144.317 87.1647C144.345 87.1022 144.196 86.3453 143.968 85.5121C143.961 85.4843 144.92 85.0494 144.754 84.2521C144.541 83.2364 143.088 81.7447 141.84 80.9759C141.521 80.7791 141.144 79.993 140.687 79.8771C139.021 79.4548 136.688 80.0285 135.803 78.9734C135.164 78.2117 134.919 76.8557 134.645 75.8028C134.215 74.1519 133.882 72.7735 133.133 71.9805C131.906 70.6818 129.537 79.8407 126.437 78.9734C123.178 78.0617 121.569 76.246 120.889 74.9987C120.503 74.2914 118.66 73.7669 118.741 73.6939C118.838 73.6062 120.784 74.1488 121.493 74.9503C122.288 75.8493 123.736 77.0742 126.437 78.1011C128.962 79.0609 130.067 70.1165 133.133 70.9052C135.378 71.483 134.801 75.8946 136.884 78.497C137.625 79.4226 141.135 78.6261 141.84 79.4264C144.227 82.135 146.507 83.2855 146.644 83.2955C148.372 83.4347 148.277 84.0908 149.629 83.3209C149.705 83.2776 150.767 82.3703 151.471 82.0532C151.504 82.0384 151.118 79.6074 148.359 78.1011C147.509 77.6369 146.032 77.5246 144.754 77.1447C142.861 76.5824 141.135 75.7606 140.349 74.9987C139.033 73.7223 140.907 72.3896 139.78 71.5824C138.652 70.7753 134.628 70.7866 132.527 70.6081C130.513 70.4369 130.067 70.0426 129.055 69.3539C127.851 68.5344 127.213 67.5862 126.437 67.1613C125.772 66.7973 122.716 65.5732 122.246 65.4211C121.512 65.1834 126.413 66.0303 127.212 67.1613C127.598 67.7078 129.116 68.6613 130.189 69.3539C131.858 70.4307 138.16 69.6497 140.349 70.9052C141.891 71.7897 139.885 73.8771 141.196 74.88C143.05 76.2974 147.106 76.5358 148.975 77.6502C152.347 79.6602 153.138 82.0815 153.236 82.1072C153.865 82.2735 154.516 82.5768 154.966 83.0358C155.518 83.5983 155.346 84.7199 155.512 85.3029C155.81 86.3984 156.359 86.3812 156.321 87.3894C156.29 89.3895 156.321 89.8769 156.321 93.2573C156.321 96.6377 156.452 99.0113 155.961 99.1902C155.849 99.2309 155.932 97.6805 155.512 96.9436C154.602 95.4169 154.015 92.7734 153.168 92.5322C151.672 92.1082 152.511 92.5794 151.471 92.7775C150.608 92.9419 153.391 97.7048 153.365 99.2321C153.361 100.96 153.104 100.949 152.186 99.1902C151.648 98.1299 150.019 95.949 148.975 94.8895C148.699 94.6003 148.373 94.4462 148.03 94.4303C147.833 94.4212 148.233 97.9947 148.03 98.0778C147.805 98.1699 146.976 94.7823 146.76 94.9894C146.605 95.1386 146.868 98.6428 146.644 98.7789C146.454 98.895 145.785 95.6449 145.55 95.7498C145.31 95.8564 145.618 99.4246 145.336 99.518C145.072 99.6056 144.221 96.2191 143.923 96.2936C143.668 96.3576 143.815 99.4646 143.538 99.518C143.205 99.5781 142.501 96.6058 142.235 96.7083C142.031 96.7866 142.422 100.16 142.235 100.274C142.039 100.394 141.267 97.257 141.068 97.4274C140.828 97.6305 140.922 100.261 140.687 100.274C140.356 100.292 139.695 97.6203 139.34 97.4619C139.057 97.3358 138.929 100.737 138.607 100.632C138.324 100.54 137.852 96.9329 137.524 96.9436C137.326 96.9513 137.181 100.286 136.884 100.274C136.596 100.262 136.158 96.9038 135.803 96.8839C135.459 96.8646 135.03 100.291 134.645 100.274C134.286 100.258 133.974 96.7968 133.598 96.79C133.226 96.7832 132.899 99.5081 132.527 99.518C132.177 99.5274 131.781 96.8208 131.447 96.8514C131.115 96.8819 130.973 99.1807 130.671 99.2382C130.324 99.3047 129.823 97.1348 129.537 97.2461C129.004 97.4532 129.263 99.0912 129.055 99.2382C128.578 99.5952 127.536 98.5697 127.536 98.7789C127.52 99.3605 124.369 100.716 123.565 101.009C122.761 101.302 122.71 101.373 122.787 102.208C122.911 103.314 123.648 104.852 124.325 105.391C124.627 105.595 125.918 106.014 127.212 106.302C127.504 106.362 128.439 103.899 128.807 104.003C129.114 104.089 128.847 106.737 129.182 106.845C129.707 107.014 130.928 103.91 131.447 104.103C131.95 104.29 131.751 107.774 132.166 107.954C132.637 108.164 133.873 104.841 134.36 105.03C134.714 105.167 134.327 108.825 134.645 108.937C135.206 109.134 135.916 105.643 136.199 105.707C136.613 105.787 136.971 109.482 137.665 109.517C137.963 109.531 138.28 106.296 138.607 106.302C138.986 106.31 139.38 109.558 139.78 109.555C140.192 109.551 140.274 106.085 140.687 106.07C141.026 106.058 141.698 109.499 142.024 109.479C142.377 109.458 142.618 106.332 142.941 106.302C143.253 106.273 143.647 109.34 143.917 109.302C144.341 109.238 144.649 105.761 145.031 105.707C145.537 105.636 146.076 108.995 146.23 108.984C146.433 108.964 147.226 106.443 147.685 106.568C147.89 106.624 147.737 109.285 147.935 109.358C148.325 109.507 149.3 105.998 149.629 106.07C149.959 106.142 149.642 109.793 150.051 109.797C150.335 109.8 150.66 107.238 151.041 107.212C151.331 107.191 151.652 109.711 152.024 109.675C152.523 109.627 152.635 106.316 153.168 106.302C153.628 106.29 154.506 109.57 154.966 109.581C155.334 109.59 155.157 106.822 155.512 106.845C155.828 106.866 156.677 109.677 156.974 109.708C157.529 109.767 158.045 109.843 158.495 109.937C160.116 110.289 162.688 111.237 162.568 111.463C162.54 111.526 162.055 111.86 161.477 112.149C160.279 112.82 160.304 112.889 162.014 115.015C163.161 116.429 164.402 118.725 164.066 118.847C163.977 118.88 163.395 118.463 162.763 117.908C161.787 117.034 159.995 116.142 159.548 116.305C159.257 116.41 159.289 117.472 159.632 119.179C160.366 122.654 160.579 125.952 160.327 129.916C160.149 132.624 159.66 132.881 159.565 130.325C159.521 128.535 156.199 120.036 155.08 118.768C154.638 118.249 154.213 117.985 154.051 118.096C153.889 118.207 153.488 119.191 153.168 120.328C152.648 122.166 151.488 124.472 151.019 124.643C150.907 124.683 150.911 123.583 151.041 122.201C151.173 120.478 151.121 119.293 150.866 118.523C150.454 117.181 150.747 117.153 147.416 118.915C143.972 120.718 139.285 121.743 140.144 120.489C140.281 120.308 140.755 119.874 141.196 119.556C143.042 118.23 145.152 116.52 145.336 116.191C145.635 115.69 145.307 114.998 144.754 114.938C144.51 114.896 143.267 115.165 142.005 115.52C140.265 116.022 139.063 116.198 136.884 116.259C134.243 116.304 133.377 116.148 134.36 115.79C134.986 115.563 135.599 114.397 135.199 114.203C134.676 113.948 129.884 113.782 127.898 113.956C126.889 114.035 125.419 114.099 124.656 114.088C123.894 114.078 123.237 114.082 123.215 114.09C123.17 114.106 123.08 113.929 122.996 113.698C122.904 113.444 123.082 112.961 123.459 112.536C123.799 112.15 124.03 111.673 123.955 111.465C123.879 111.257 122.887 110.964 121.604 110.777C120.388 110.565 118.689 110.137 117.817 109.827C116.944 109.516 115.748 109.219 115.128 109.183C113.719 109.067 113.4 108.817 113.849 108.104C114.07 107.736 114.103 107.41 113.929 107.212C113.764 107.036 111.587 106.756 108.938 106.568C104.897 106.312 103.575 106.087 99.6483 105.03C97.155 104.367 86.8109 102.133 80.6427 105.372C79.6018 105.919 81.3347 103.604 84.2896 102.208C86.0892 101.358 89.474 101.435 89.6817 101.009C89.7989 100.769 86.5892 99.5867 83.0887 99.2382C78.9629 98.8275 74.4366 99.2638 74.5285 99.2382C75.3904 98.9987 76.2412 97.4619 83.5523 97.4619C90.8634 97.4619 95.5484 101.205 95.694 101.009C95.854 100.794 93.7359 99.2893 90.8634 98.4281C88.0428 97.5825 82.4887 95.5886 77.381 94.8895C70.5056 93.9484 64.2176 94.3934 64.3985 94.0504C64.4442 93.9638 69.8731 92.8761 75.8797 93.2573C82.3984 93.6709 89.6041 95.5858 91.528 96.2936C95.0896 97.6039 98.9113 100.307 98.7491 100.07C98.6663 99.9489 97.1162 97.3278 93.8384 95.6321C90.0542 93.6743 84.2688 92.5755 80.6817 91.8965C70.4602 89.9618 57.967 88.7271 58.6637 88.2466C58.7787 88.1673 67.91 89.3697 76.9223 90C81.6317 90.3294 86.0861 89.7734 89.6817 90.36C92.5713 90.8314 94.454 92.4235 95.2611 92.87C98.9943 94.9349 97.2637 95.8399 98.2169 96.2936C100.514 97.3872 100.963 97.2021 101.639 96.7083C102.485 96.0896 102.442 93.096 103.483 90.36C104.282 88.2598 106.71 88.2663 106.653 88.2466C106.501 88.194 104.267 88.1599 102.968 89.3385C102.304 89.9406 102.111 91.9629 102.096 92.1794C101.979 93.7844 102.027 95.3008 100.677 95.6321C98.1394 96.2549 98.6469 93.3961 96.5987 91.8965C96.1277 91.5516 94.3207 90.5465 92.3007 90C90.3686 89.4773 88.2341 89.4066 87.2054 89.3385C82.984 89.059 76.64 90.2039 71.4725 88.2466C59.9556 83.8845 50.4385 75.6834 51.1386 75.4308C51.3743 75.3458 59.5807 82.5653 70.4096 85.955C77.4926 88.1722 87.1079 85.9019 93.3643 87.1647C95.4349 87.5827 96.4511 87.8788 97.5837 89.0649C98.9427 90.4882 99.2279 91.0465 99.6483 92.5322C100.069 94.0178 100.065 88.4447 97.5837 87.5106C92.0464 85.4263 80.5209 85.3202 75.8797 83.3209C66.5395 79.2974 60.9385 73.8766 60.8893 73.6939C60.6903 72.9548 67.9861 78.6294 76.5461 82.0532C82.9489 84.6143 91.1462 85.2435 91.528 84.6466C91.7519 84.2965 86.0591 81.3443 83.9075 80.9759C80.9117 80.4629 88.4067 81.4506 88.1041 80.9759C87.5412 80.0928 76.8584 74.1776 76.9223 74.1544C77.3915 73.9836 85.3906 77.6102 83.67 75.8028C82.7579 74.8264 81.3869 73.2843 80.6817 72.3896C79.9457 71.4799 78.0905 69.3028 76.5461 67.5622C73.8992 64.6003 72.9727 63.2367 73.4866 63.0496C73.5983 63.0089 73.9282 63.1506 74.1855 63.3709ZM122.686 89.7434C121.675 86.0936 117.978 85.7693 115.344 86.7587C114.187 87.3774 113.976 87.4657 113.504 88.0483C113.517 88.1814 116.474 90.8384 118.138 91.4722C120.022 92.2172 122.596 91.6066 122.79 91.4515C123.007 91.2854 122.976 90.7419 122.686 89.7434Z'
// 带眼睛的龙头路径
export const headWithEyePath = 'M0 0L0 0M200 200L200 200M74.1855 63.3709C75.1589 64.168 76.8372 65.6506 78.9408 67.6064C81.9675 70.43 83.0004 72.3608 87.2054 74.3892C90.3116 75.9016 91.3793 76.1933 91.1018 75.4308C90.9841 75.1073 90.0688 73.8442 87.4464 70.3239L85.9771 68.3727C84.6934 65.7777 83.7306 63.8315 83.0887 62.534C82.9165 62.1858 69.1398 55.7125 64.9891 53.3816C64.0715 52.8663 65.4785 52.4959 67.0752 53.3816C68.1396 53.9721 72.8883 55.832 81.3213 58.9615C80.6506 57.0428 79.5101 55.7717 75.8797 51.3107C74.2168 49.2673 66.0944 47.8197 64.9891 46.1868C64.1681 44.9739 74.6499 49.5643 74.5285 48.5311C74.2037 45.7686 72.2119 43.4112 69.1918 40.4042C66.1718 37.3973 60.1817 31.6662 63.7455 33.337C63.764 33.372 70.3842 39.9846 70.4096 40.0286C70.996 41.0414 74.3102 44.4099 76.9483 48.3723C77.1512 48.6771 76.8296 47.4044 76.9223 45.435C77.056 42.594 75.5547 37.9273 75.8797 37.8856C75.8997 37.8831 77.4989 42.7137 77.9191 46.1868C78.3229 49.5248 79.8318 52.6837 80.0867 53.0629C81.9378 55.8169 83.7416 58.4788 85.107 60.4675C86.2075 62.0704 83.9637 56.1478 84.2896 56.5721C84.7647 57.2004 88.3497 64.947 88.8982 65.6065C91.4487 68.6729 94.4951 71.764 95.2611 71.9805C95.9627 72.17 95.9309 71.318 95.2161 69.3539C94.6866 67.8993 93.0804 62.0049 90 56.5721C89.8003 56.22 86.6555 55.8776 83.5523 53.924C80.8306 52.2106 78.6291 49.6353 78.4437 49.327C78.3965 49.2483 78.2744 48.8025 78.9408 49.327C80.2001 50.3181 82.7616 52.0055 84.6496 52.9511C86.8905 54.0735 88.5724 53.5569 88.4641 53.3816C87.4428 51.7274 86.3881 50.1 85.3823 48.5517C85.2112 48.2884 78.0869 44.4894 77.9191 44.2309C77.7141 43.9151 84.8485 46.4945 84.6496 46.1869C83.7337 44.7695 82.9719 41.915 81.3213 40.0286C78.6771 37.0064 75.0912 34.9614 75.016 33.9452C74.973 33.3942 78.4941 34.8419 81.3213 37.8856C83.5598 40.2955 85.0212 44.2004 86.3371 45.435C86.97 46.0287 85.655 39.3967 86.3371 40.4042C87.3689 41.9282 86.6537 45.0776 87.7091 47.7944C88.109 48.8238 87.7515 48.1623 89.2115 50.9455C89.7777 52.0247 89.3365 50.057 89.2582 48.5517C89.1346 46.175 89.1108 43.3845 89.2582 43.6341C89.5698 44.1616 90.5474 53.2276 90.8634 53.7287C92.3671 56.113 93.4547 58.1169 93.8384 58.9615C96.5111 64.8447 100.453 70.1168 102.619 72.5211C104.25 74.361 106.202 74.5314 105.47 72.5211C104.024 68.5467 100.879 61.2742 101.275 60.5544C101.559 60.0845 101.615 60.1688 102.968 62.8428C105.903 68.6828 107.863 71.6331 111.581 75.8011C113.495 77.9307 114.043 78.2546 116.181 78.497C117.978 78.7065 119.063 79.2537 121.233 80.9759C122.027 81.6288 123.115 82.2535 123.755 82.413C126.31 83.1056 128.443 83.8209 129.055 84.2521C129.536 84.6004 129.833 85.0681 130.189 86.116L130.671 87.5106L131.647 87.5482C132.161 87.5704 133.916 89.2551 135.516 89.0649C139.162 88.6538 141.503 89.6542 143.142 88.2466C143.756 87.7091 144.289 87.2272 144.317 87.1647C144.345 87.1022 144.196 86.3453 143.968 85.5121C143.961 85.4843 144.92 85.0494 144.754 84.2521C144.541 83.2364 143.088 81.7447 141.84 80.9759C141.521 80.7791 141.144 79.993 140.687 79.8771C139.021 79.4548 136.688 80.0285 135.803 78.9734C135.164 78.2117 134.919 76.8557 134.645 75.8028C134.215 74.1519 133.882 72.7735 133.133 71.9805C131.906 70.6818 129.537 79.8407 126.437 78.9734C123.178 78.0617 121.569 76.246 120.889 74.9987C120.503 74.2914 118.66 73.7669 118.741 73.6939C118.838 73.6062 120.784 74.1488 121.493 74.9503C122.288 75.8493 123.736 77.0742 126.437 78.1011C128.962 79.0609 130.067 70.1165 133.133 70.9052C135.378 71.483 134.801 75.8946 136.884 78.497C137.625 79.4226 141.135 78.6261 141.84 79.4264C144.227 82.135 146.507 83.2855 146.644 83.2955C148.372 83.4347 148.277 84.0908 149.629 83.3209C149.705 83.2776 150.767 82.3703 151.471 82.0532C151.504 82.0384 151.118 79.6074 148.359 78.1011C147.509 77.6369 146.032 77.5246 144.754 77.1447C142.861 76.5824 141.135 75.7606 140.349 74.9987C139.033 73.7223 140.907 72.3896 139.78 71.5824C138.652 70.7753 134.628 70.7866 132.527 70.6081C130.513 70.4369 130.067 70.0426 129.055 69.3539C127.851 68.5344 127.213 67.5862 126.437 67.1613C125.772 66.7973 122.716 65.5732 122.246 65.4211C121.512 65.1834 126.413 66.0303 127.212 67.1613C127.598 67.7078 129.116 68.6613 130.189 69.3539C131.858 70.4307 138.16 69.6497 140.349 70.9052C141.891 71.7897 139.885 73.8771 141.196 74.88C143.05 76.2974 147.106 76.5358 148.975 77.6502C152.347 79.6602 153.138 82.0815 153.236 82.1072C153.865 82.2735 154.516 82.5768 154.966 83.0358C155.518 83.5983 155.346 84.7199 155.512 85.3029C155.81 86.3984 156.359 86.3812 156.321 87.3894C156.29 89.3895 156.321 89.8769 156.321 93.2573C156.321 96.6377 156.452 99.0113 155.961 99.1902C155.849 99.2309 155.932 97.6805 155.512 96.9436C154.602 95.4169 154.015 92.7734 153.168 92.5322C151.672 92.1082 152.511 92.5794 151.471 92.7775C150.608 92.9419 153.391 97.7048 153.365 99.2321C153.361 100.96 153.104 100.949 152.186 99.1902C151.648 98.1299 150.019 95.949 148.975 94.8895C148.699 94.6003 148.373 94.4462 148.03 94.4303C147.833 94.4212 148.233 97.9947 148.03 98.0778C147.805 98.1699 146.976 94.7823 146.76 94.9894C146.605 95.1386 146.868 98.6428 146.644 98.7789C146.454 98.895 145.785 95.6449 145.55 95.7498C145.31 95.8564 145.618 99.4246 145.336 99.518C145.072 99.6056 144.221 96.2191 143.923 96.2936C143.668 96.3576 143.815 99.4646 143.538 99.518C143.205 99.5781 142.501 96.6058 142.235 96.7083C142.031 96.7866 142.422 100.16 142.235 100.274C142.039 100.394 141.267 97.257 141.068 97.4274C140.828 97.6305 140.922 100.261 140.687 100.274C140.356 100.292 139.695 97.6203 139.34 97.4619C139.057 97.3358 138.929 100.737 138.607 100.632C138.324 100.54 137.852 96.9329 137.524 96.9436C137.326 96.9513 137.181 100.286 136.884 100.274C136.596 100.262 136.158 96.9038 135.803 96.8839C135.459 96.8646 135.03 100.291 134.645 100.274C134.286 100.258 133.974 96.7968 133.598 96.79C133.226 96.7832 132.899 99.5081 132.527 99.518C132.177 99.5274 131.781 96.8208 131.447 96.8514C131.115 96.8819 130.973 99.1807 130.671 99.2382C130.324 99.3047 129.823 97.1348 129.537 97.2461C129.004 97.4532 129.263 99.0912 129.055 99.2382C128.578 99.5952 127.536 98.5697 127.536 98.7789C127.52 99.3605 124.369 100.716 123.565 101.009C122.761 101.302 122.71 101.373 122.787 102.208C122.911 103.314 123.648 104.852 124.325 105.391C124.627 105.595 125.918 106.014 127.212 106.302C127.504 106.362 128.439 103.899 128.807 104.003C129.114 104.089 128.847 106.737 129.182 106.845C129.707 107.014 130.928 103.91 131.447 104.103C131.95 104.29 131.751 107.774 132.166 107.954C132.637 108.164 133.873 104.841 134.36 105.03C134.714 105.167 134.327 108.825 134.645 108.937C135.206 109.134 135.916 105.643 136.199 105.707C136.613 105.787 136.971 109.482 137.665 109.517C137.963 109.531 138.28 106.296 138.607 106.302C138.986 106.31 139.38 109.558 139.78 109.555C140.192 109.551 140.274 106.085 140.687 106.07C141.026 106.058 141.698 109.499 142.024 109.479C142.377 109.458 142.618 106.332 142.941 106.302C143.253 106.273 143.647 109.34 143.917 109.302C144.341 109.238 144.649 105.761 145.031 105.707C145.537 105.636 146.076 108.995 146.23 108.984C146.433 108.964 147.226 106.443 147.685 106.568C147.89 106.624 147.737 109.285 147.935 109.358C148.325 109.507 149.3 105.998 149.629 106.07C149.959 106.142 149.642 109.793 150.051 109.797C150.335 109.8 150.66 107.238 151.041 107.212C151.331 107.191 151.652 109.711 152.024 109.675C152.523 109.627 152.635 106.316 153.168 106.302C153.628 106.29 154.506 109.57 154.966 109.581C155.334 109.59 155.157 106.822 155.512 106.845C155.828 106.866 156.677 109.677 156.974 109.708C157.529 109.767 158.045 109.843 158.495 109.937C160.116 110.289 162.688 111.237 162.568 111.463C162.54 111.526 162.055 111.86 161.477 112.149C160.279 112.82 160.304 112.889 162.014 115.015C163.161 116.429 164.402 118.725 164.066 118.847C163.977 118.88 163.395 118.463 162.763 117.908C161.787 117.034 159.995 116.142 159.548 116.305C159.257 116.41 159.289 117.472 159.632 119.179C160.366 122.654 160.579 125.952 160.327 129.916C160.149 132.624 159.66 132.881 159.565 130.325C159.521 128.535 156.199 120.036 155.08 118.768C154.638 118.249 154.213 117.985 154.051 118.096C153.889 118.207 153.488 119.191 153.168 120.328C152.648 122.166 151.488 124.472 151.019 124.643C150.907 124.683 150.911 123.583 151.041 122.201C151.173 120.478 151.121 119.293 150.866 118.523C150.454 117.181 150.747 117.153 147.416 118.915C143.972 120.718 139.285 121.743 140.144 120.489C140.281 120.308 140.755 119.874 141.196 119.556C143.042 118.23 145.152 116.52 145.336 116.191C145.635 115.69 145.307 114.998 144.754 114.938C144.51 114.896 143.267 115.165 142.005 115.52C140.265 116.022 139.063 116.198 136.884 116.259C134.243 116.304 133.377 116.148 134.36 115.79C134.986 115.563 135.599 114.397 135.199 114.203C134.676 113.948 129.884 113.782 127.898 113.956C126.889 114.035 125.419 114.099 124.656 114.088C123.894 114.078 123.237 114.082 123.215 114.09C123.17 114.106 123.08 113.929 122.996 113.698C122.904 113.444 123.082 112.961 123.459 112.536C123.799 112.15 124.03 111.673 123.955 111.465C123.879 111.257 122.887 110.964 121.604 110.777C120.388 110.565 118.689 110.137 117.817 109.827C116.944 109.516 115.748 109.219 115.128 109.183C113.719 109.067 113.4 108.817 113.849 108.104C114.07 107.736 114.103 107.41 113.929 107.212C113.764 107.036 111.587 106.756 108.938 106.568C104.897 106.312 103.575 106.087 99.6483 105.03C97.155 104.367 86.8109 102.133 80.6427 105.372C79.6018 105.919 81.3347 103.604 84.2896 102.208C86.0892 101.358 89.474 101.435 89.6817 101.009C89.7989 100.769 86.5892 99.5867 83.0887 99.2382C78.9629 98.8275 74.4366 99.2638 74.5285 99.2382C75.3904 98.9987 76.2412 97.4619 83.5523 97.4619C90.8634 97.4619 95.5484 101.205 95.694 101.009C95.854 100.794 93.7359 99.2893 90.8634 98.4281C88.0428 97.5825 82.4887 95.5886 77.381 94.8895C70.5056 93.9484 64.2176 94.3934 64.3985 94.0504C64.4442 93.9638 69.8731 92.8761 75.8797 93.2573C82.3984 93.6709 89.6041 95.5858 91.528 96.2936C95.0896 97.6039 98.9113 100.307 98.7491 100.07C98.6663 99.9489 97.1162 97.3278 93.8384 95.6321C90.0542 93.6743 84.2688 92.5755 80.6817 91.8965C70.4602 89.9618 57.967 88.7271 58.6637 88.2466C58.7787 88.1673 67.91 89.3697 76.9223 90C81.6317 90.3294 86.0861 89.7734 89.6817 90.36C92.5713 90.8314 94.454 92.4235 95.2611 92.87C98.9943 94.9349 97.2637 95.8399 98.2169 96.2936C100.514 97.3872 100.963 97.2021 101.639 96.7083C102.485 96.0896 102.442 93.096 103.483 90.36C104.282 88.2598 106.71 88.2663 106.653 88.2466C106.501 88.194 104.267 88.1599 102.968 89.3385C102.304 89.9406 102.111 91.9629 102.096 92.1794C101.979 93.7844 102.027 95.3008 100.677 95.6321C98.1394 96.2549 98.6469 93.3961 96.5987 91.8965C96.1277 91.5516 94.3207 90.5465 92.3007 90C90.3686 89.4773 88.2341 89.4066 87.2054 89.3385C82.984 89.059 76.64 90.2039 71.4725 88.2466C59.9556 83.8845 50.4385 75.6834 51.1386 75.4308C51.3743 75.3458 59.5807 82.5653 70.4096 85.955C77.4926 88.1722 87.1079 85.9019 93.3643 87.1647C95.4349 87.5827 96.4511 87.8788 97.5837 89.0649C98.9427 90.4882 99.2279 91.0465 99.6483 92.5322C100.069 94.0178 100.065 88.4447 97.5837 87.5106C92.0464 85.4263 80.5209 85.3202 75.8797 83.3209C66.5395 79.2974 60.9385 73.8766 60.8893 73.6939C60.6903 72.9548 67.9861 78.6294 76.5461 82.0532C82.9489 84.6143 91.1462 85.2435 91.528 84.6466C91.7519 84.2965 86.0591 81.3443 83.9075 80.9759C80.9117 80.4629 88.4067 81.4506 88.1041 80.9759C87.5412 80.0928 76.8584 74.1776 76.9223 74.1544C77.3915 73.9836 85.3906 77.6102 83.67 75.8028C82.7579 74.8264 81.3869 73.2843 80.6817 72.3896C79.9457 71.4799 78.0905 69.3028 76.5461 67.5622C73.8992 64.6003 72.9727 63.2367 73.4866 63.0496C73.5983 63.0089 73.9282 63.1506 74.1855 63.3709ZM118.04 87.3619C117.106 87.7019 116.624 88.7348 116.964 89.6689C117.304 90.6031 118.337 91.0847 119.271 90.7447C120.205 90.4047 120.687 89.3718 120.347 88.4377C120.007 87.5035 118.974 87.0218 118.04 87.3619ZM122.686 89.7434C121.675 86.0936 117.978 85.7693 115.344 86.7587C114.187 87.3774 113.976 87.4657 113.504 88.0483C113.517 88.1814 116.474 90.8384 118.138 91.4722C120.022 92.2172 122.596 91.6066 122.79 91.4515C123.007 91.2854 122.976 90.7419 122.686 89.7434Z'
// 龙身路径
export const bodyPath = 'M0 35L0 35M5.22031 0.227803C5.22031 0.899546 11.8291 4.57547 15.1335 6.32947C17.0028 7.34056 16.6676 8.09423 16.2664 8.34468C15.8887 8.34468 13.5796 7.81818 8.70803 4.72816C2.61852 0.865639 5.22031 -0.611875 5.22031 0.227803ZM18.5538 1.52726C18.5538 2.199 25.1626 5.87492 28.467 7.62892C30.3363 8.64002 30.0011 9.39368 29.5999 9.64413C29.2223 9.64414 27.1259 9.47216 22.2543 6.38214C16.1648 2.51962 18.5538 0.687578 18.5538 1.52726ZM9.23438 8.51768C8.92671 8.36604 8.5303 8.40408 8.27534 8.6097L6.9218 9.70132C6.61695 9.94718 6.61695 10.3458 6.9218 10.5917L8.27534 11.6833C8.5303 11.8889 8.92671 11.9269 9.23438 11.7753L11.4493 10.6837C11.9473 10.4382 11.9473 9.85479 11.4493 9.6093L9.23438 8.51768ZM16.189 8.61139C16.4587 8.40636 16.8699 8.38247 17.1731 8.55421L19.0752 9.63129C19.5179 9.882 19.5179 10.4111 19.0752 10.6618L17.1731 11.7388C16.8699 11.9105 16.4587 11.8866 16.1891 11.6816L15.375 11.0626C14.7214 10.5656 14.7214 9.72739 15.375 9.23037L16.189 8.61139ZM25.43 8.70435C25.1252 8.45849 24.6309 8.45849 24.3261 8.70435L22.9908 9.78122C22.7275 9.99356 22.6868 10.3263 22.8936 10.576L25.0572 13.189C25.4405 13.652 26.3255 13.5154 26.4698 12.971L27.1295 10.4812C27.1848 10.2725 27.1052 10.0554 26.9181 9.90445L25.43 8.70435ZM16.6123 12.3073C16.9365 12.039 17.4776 12.057 17.7733 12.3458L19.7806 14.3064C20.0516 14.5711 20.0097 14.9621 19.6864 15.1854L17.1197 16.9583C16.8455 17.1477 16.4461 17.1608 16.1538 16.9899L13.8378 15.6361C13.4523 15.4108 13.4046 14.962 13.7369 14.687L16.6123 12.3073ZM24.6326 13.1979C24.3899 13.082 24.0887 13.0806 23.8445 13.1943L21.2614 14.3968C20.7492 14.6353 20.739 15.2285 21.2427 15.4784L24.473 17.0804C24.7217 17.2038 25.0351 17.2048 25.2852 17.0831L27.873 15.8236C28.3785 15.5776 28.3755 14.9855 27.8675 14.7429L24.6326 13.1979ZM15.7243 18.3082C16.0343 17.9428 16.7028 17.9428 17.0128 18.3082L18.7185 20.3188C18.8861 20.5164 18.9002 20.7737 18.7548 20.9826L17.2612 23.1273C16.9794 23.532 16.2698 23.5599 15.9404 23.1792L14.0534 20.9983C13.8676 20.7836 13.866 20.4986 14.0493 20.2825L15.7243 18.3082ZM26.2712 19.1317C25.6935 18.2107 24.0626 18.2107 23.4849 19.1317L22.7539 20.2971C22.6214 20.5084 22.6471 20.7619 22.8204 20.953L24.248 22.527C24.5598 22.8709 25.1962 22.8709 25.5081 22.527L26.9357 20.953C27.109 20.7619 27.1347 20.5084 27.0022 20.2971L26.2712 19.1317ZM8.42454 24.1448C8.60355 24.0004 8.85826 23.935 9.10782 23.9694L10.2448 24.1258C10.7954 24.2016 11.072 24.7056 10.7714 25.0852L9.23283 27.0287C8.96433 27.3679 8.37568 27.4196 8.02289 27.1351L6.92181 26.2471C6.61696 26.0012 6.61696 25.6026 6.92181 25.3567L8.42454 24.1448ZM17.2041 24.3599C16.8993 24.114 16.405 24.114 16.1002 24.3599L14.864 25.3568C14.5592 25.6027 14.5592 26.0013 14.864 26.2471L16.1002 27.2441C16.405 27.4899 16.8993 27.4899 17.2041 27.2441L18.4403 26.2471C18.7452 26.0013 18.7452 25.6027 18.4403 25.3568L17.2041 24.3599ZM24.3261 24.3599C24.6309 24.114 25.1252 24.114 25.43 24.3599L26.5589 25.2703C26.9026 25.5474 26.852 26.0078 26.4532 26.2319L25.7386 26.6336C25.5128 26.7605 25.2208 26.7822 24.9701 26.6906L23.5654 26.1774C23.0685 25.9958 22.9498 25.4698 23.3355 25.1587L24.3261 24.3599ZM9.83185 18.6545C9.52101 18.4322 9.04875 18.4452 8.75741 18.6841L6.91277 20.1964C6.61219 20.4429 6.61421 20.8387 6.91729 21.0831L8.27897 22.1813C8.53226 22.3855 8.92543 22.4246 9.23258 22.2759L11.6977 21.083C12.1499 20.8643 12.2086 20.3543 11.814 20.0722L9.83185 18.6545ZM28.2972 21.807C28.602 21.5611 29.0963 21.5611 29.4011 21.807L30.5136 22.7042C30.8627 22.9857 30.8041 23.4547 30.3924 23.6744L28.483 24.6933C28.1058 24.8946 27.5961 24.796 27.3731 24.4787L26.8019 23.6659C26.6289 23.4197 26.6809 23.1105 26.9291 22.9103L28.2972 21.807ZM21.1753 21.807C20.8704 21.5611 20.3761 21.5611 20.0713 21.807L18.7028 22.9107C18.4548 23.1107 18.4027 23.4195 18.5753 23.6657L20.2408 26.0407C20.5645 26.5023 21.4074 26.4541 21.6471 25.9603L22.7772 23.6326C22.8903 23.3997 22.8217 23.1348 22.6023 22.9579L21.1753 21.807ZM12.1291 21.807C12.4339 21.5611 12.9282 21.5611 13.233 21.807L14.6892 22.9814C14.8935 23.1461 14.9682 23.3884 14.8836 23.6111L14.0696 25.7523C13.8794 26.2527 13.0593 26.3583 12.6853 25.9306L10.7197 23.6823C10.5008 23.432 10.5371 23.0909 10.8056 22.8743L12.1291 21.807ZM9.3268 13.205C8.98152 13.0166 8.51368 13.0803 8.26416 13.3496L6.72522 15.0105C6.51521 15.2371 6.51848 15.5489 6.73321 15.7727L8.19483 17.2957C8.47284 17.5853 8.99762 17.6232 9.33493 17.3779L11.3892 15.8838C11.3531 15.925 11.3223 15.9708 11.2981 16.0209L10.4958 17.681C10.3993 17.8808 10.4354 18.1064 10.5917 18.2798L12.0496 19.8974C12.3614 20.2433 13.0008 20.2433 13.3125 19.8974L14.6503 18.4131C14.8666 18.173 14.8457 17.8437 14.6001 17.6227L12.6067 15.8293C12.3463 15.595 11.9418 15.5645 11.6398 15.7016L11.8697 15.5344C12.2462 15.2606 12.2042 14.7744 11.7842 14.5454L9.3268 13.205ZM28.2619 16.3875C28.5729 16.1012 29.1254 16.1012 29.4364 16.3875L30.7838 17.6283C31.0216 17.8472 31.0423 18.1691 30.8338 18.4067L29.4864 19.9426C29.1753 20.2971 28.523 20.2971 28.2119 19.9426L26.8645 18.4067C26.656 18.1691 26.6767 17.8472 26.9145 17.6282L28.2619 16.3875ZM20.5467 15.6603C20.2248 15.4827 19.7899 15.524 19.5278 15.7569L17.8377 17.2592C17.5989 17.4715 17.568 17.7871 17.7626 18.027L19.8824 20.6396C20.1758 21.0013 20.8237 21.0224 21.1523 20.6809L23.0816 18.6759C23.6328 18.1031 23.4717 17.2741 22.7297 16.8647L20.5467 15.6603ZM28.2979 11.3449C28.599 11.0837 29.1089 11.0762 29.4216 11.3284L30.7238 12.3786C30.9927 12.5955 31.0287 12.9371 30.809 13.1874L29.4198 14.7709C29.1286 15.1028 28.5295 15.1284 28.1965 14.8231L26.7627 13.5088C26.4979 13.266 26.5041 12.901 26.777 12.6642L28.2979 11.3449ZM21.5931 9.63376C21.2841 9.29955 20.6649 9.29546 20.3492 9.62554L18.2607 11.8089C18.028 12.0522 18.0471 12.3954 18.3058 12.621L20.1861 14.2602C20.4399 14.4815 20.8527 14.5266 21.1704 14.3677L23.0067 13.4496C23.7844 13.0608 23.9826 12.2184 23.4357 11.6268L21.5931 9.63376ZM12.9316 9.98368C13.2899 9.7446 13.8262 9.80949 14.0816 10.1228L15.7986 12.2289C16.0351 12.5191 15.9357 12.909 15.5763 13.1003L13.0912 14.423C12.8406 14.5564 12.5172 14.562 12.2596 14.4374L9.7267 13.2117C9.26494 12.9883 9.21577 12.4638 9.63063 12.1869L12.9316 9.98368ZM21.3544 6.97893C18.687 5.55195 13.3522 2.56136 13.3522 2.01486C13.3522 1.33173 11.2238 2.7104 16.1394 5.85279C20.0719 8.3667 21.9641 8.61843 22.2689 8.61842C22.5928 8.41467 22.8634 7.80151 21.3544 6.97893ZM10.9468 6.73668C7.14987 6.38214 1.33502 3.07657 1.33502 2.55284C1.33502 1.89817 -0.52645 2.87427 4.24244 5.88572C8.05755 8.29489 10.6511 8.65132 10.9468 8.65132C11.261 8.45606 12.4107 7.52499 10.9468 6.73668Z'
// 左右龙爪路径
export const clawLeftPath = 'M0 0L0 0M150 150L150 150M79.9034 61.2132C79.7797 61.0366 79.6731 60.3219 79.6617 59.5931C79.6627 58.882 79.4622 57.7332 79.2427 57.0449C78.6979 55.4793 78.6763 55.0734 79.0772 54.1086C79.4958 53.1314 80.8752 52.1392 81.8414 52.0941C82.2117 52.098 83.5343 52.2244 84.7864 52.4001C87.0031 52.7161 88.9565 52.506 89.9079 51.8398C90.7007 51.2847 92.4236 51.4203 94.3711 52.2142C95.4083 52.6456 96.9086 52.4633 97.8424 51.8095C99.0228 50.983 99.2698 51.0732 100.141 52.542L100.906 53.8219L102.514 53.9062C103.404 53.9405 105.938 54.0344 108.142 54.0698C110.902 54.1109 112.602 54.2888 113.552 54.5966C114.972 55.0496 116.362 54.9713 117.154 54.4162C117.401 54.2435 118.109 53.6424 118.765 53.0783C119.788 52.1775 120.059 52.0401 120.898 51.9261C121.702 51.8368 121.956 51.7118 122.233 51.2815C122.798 50.4385 122.855 49.8457 122.533 47.6239C122.249 45.718 122.147 45.4215 121.306 44.2209C120.799 43.4971 120.006 42.5524 119.567 42.1497C118.718 41.3497 117.494 40.8387 117.323 41.195C117.284 41.3273 117.684 42.0475 118.228 42.8244C119.217 44.2368 119.512 45.1087 119.385 46.2767C119.317 46.9295 119.04 47.0969 118.052 46.999C116.88 46.8992 116.212 47.4456 115.621 48.9644C115.363 49.6452 115.067 50.2731 114.997 50.3225C114.909 50.3842 114.017 50.2722 112.997 50.0914C111.965 49.8929 109.55 49.7426 107.651 49.7304C105.722 49.7129 104.061 49.6656 103.946 49.6144C103.554 49.4676 103.553 48.153 103.938 47.5411C104.238 47.0684 104.771 46.6684 106.144 45.8914C108.636 44.4625 111.606 42.33 111.896 41.7321C112.021 41.4604 112.124 40.783 112.099 40.2218C112.074 39.6607 112.193 38.8932 112.381 38.5246C113.366 36.5192 113.23 34.8252 111.96 33.873C111.602 33.6239 110.963 33.387 110.515 33.3848C110.067 33.3827 109.152 33.0502 108.462 32.6649C106.398 31.4792 104.052 31.2796 101.951 32.0665C101.419 32.2813 100.577 32.5029 100.083 32.5855C99.1362 32.6958 98.5054 33.0323 98.7032 33.3148C98.765 33.4031 99.6925 33.4903 100.768 33.5265C102.799 33.5777 105.24 34.0261 105.488 34.3792C105.574 34.5028 105.529 35.1133 105.389 35.7378C105.196 36.6623 105.228 37.0081 105.574 37.5025C105.834 37.8732 105.984 38.4257 105.97 38.8562C105.945 39.532 105.851 39.6236 104.407 40.6352C103.05 41.5851 102.782 41.8778 102.152 43.003C101.317 44.5092 100.205 45.7346 99.4932 45.9175C98.6859 46.1144 98.2658 45.7771 97.7018 44.4091C96.6993 41.9274 96.6869 41.9097 95.8366 41.5578C94.6723 41.0575 93.9711 39.9435 93.7771 38.3165C93.6044 36.8324 92.7097 34.6172 92.1963 34.3715C91.9969 34.2743 91.452 34.2085 90.9566 34.2134C90.3659 34.2323 89.812 34.0413 89.3197 33.6756C88.3473 32.9619 86.8536 32.666 85.3903 32.9012C84.4983 33.0522 83.8427 33.3533 82.4314 34.2626C79.5964 36.0635 78.3291 38.0034 80.6043 37.0154C82.7914 36.0892 86.0584 35.8802 86.5777 36.6217C86.7631 36.8866 86.7142 37.3418 86.403 38.0597C86.1603 38.6506 86.0394 39.3404 86.1473 39.6069C86.3896 40.2529 87.2825 40.8907 88.6267 41.4229C89.5545 41.7731 89.8228 42.0062 90.5151 42.9949C90.9972 43.6835 91.7439 44.4499 92.3333 44.8792C93.8703 45.9868 94.7725 47.0128 94.5419 47.3584C94.1265 47.965 91.4529 47.5217 89.6693 46.5867C88.6654 46.053 86.4539 45.707 85.4262 45.9267C85.0102 46.0075 83.8804 46.4565 82.9059 46.9021C81.9437 47.3654 80.9425 47.698 80.6851 47.6678C80.4152 47.6199 79.7872 47.3229 79.3072 46.9749C78.7972 46.6216 78.0703 46.1834 77.654 46.0013L76.906 45.683L74.8094 47.1511C72.4309 48.8165 72.4362 48.7865 73.0132 50.698C73.592 52.687 73.5779 55.8543 73.0184 56.9302C72.8407 57.2388 73.6961 66.4409 76.906 66.4409C80.3685 66.4409 80.0393 61.4074 79.9034 61.2132Z'
export const clawRightPath = 'M0 0L0 0M150 150L150 150M78.6177 89.5666C77.8128 92.3319 77.6467 93.834 78.1016 93.9996C78.2004 94.0355 78.6503 94.8913 79.1417 95.9407C80.0922 98.0055 80.4654 99.7486 80.7576 103.56C80.861 104.937 81.1011 106.431 81.2703 106.828C81.9724 108.467 83.2473 109.333 85.4473 109.687C87.3094 109.986 88.1633 110.408 90.1235 112.037C91.7329 113.337 92.069 113.459 94.4432 113.52C95.7533 113.55 95.8324 113.579 98.6173 114.972C100.194 115.747 101.67 116.552 101.924 116.778C102.535 117.313 102.73 118.991 102.258 119.735C102.077 120.048 101.667 120.435 101.35 120.632C99.9627 121.489 99.7456 121.901 98.8029 125.598C98.0019 128.722 97.8727 129.077 97.3322 129.639C96.6265 130.409 95.5321 130.524 94.0885 129.998C93.5618 129.784 92.6074 129.638 91.9479 129.666C89.9099 129.728 88.6571 129.54 86.7984 128.863C84.9791 128.201 84.402 127.879 84.5096 127.584C84.5455 127.485 84.9462 127.43 85.4117 127.443C85.8502 127.469 86.7164 127.427 87.3238 127.358C87.9312 127.289 88.6034 127.288 88.8011 127.36C89.3746 127.568 92.0395 127.199 92.1471 126.903C92.1974 126.765 92.0875 126.391 91.8895 126.073C91.4685 125.384 91.5653 124.995 92.2444 124.729C92.5875 124.586 92.9251 124.151 93.3414 123.253C93.6859 122.552 94.4254 121.259 95.0143 120.38C96.0735 118.823 96.0806 118.803 95.8125 118.371C95.4725 117.89 94.732 117.71 92.7101 117.666C91.0207 117.631 90.4347 117.396 89.0032 116.16C88.372 115.618 87.7193 115.135 87.5809 115.085C87.1261 114.919 86.999 115.699 87.2069 117.404C87.4782 119.735 87.3239 120.036 85.213 121.098L83.4398 121.971L82.2571 124.174C81.593 125.384 80.9055 126.473 80.7025 126.6C80.4115 126.784 80.0071 126.726 78.7811 126.28C77.884 125.976 76.6671 125.689 75.9159 125.661C74.2355 125.541 71.0572 124.428 70.167 123.613C69.3685 122.854 69.7134 122.645 70.9988 123.112C72.205 123.551 74.8722 123.853 75.7563 123.639C76.466 123.473 76.6204 123.172 76.4938 122.166C76.4053 121.486 76.4394 121.454 77.0466 121.139C77.4041 120.957 77.9611 120.78 78.3349 120.738C78.883 120.647 79.0123 120.538 79.2993 119.749C79.5863 118.961 79.791 118.767 80.8509 118.193C83.0983 117.002 83.8553 115.046 82.3936 114.201C82.0592 114.012 81.4101 113.642 80.9516 113.364C79.8045 112.701 79.1576 112.755 78.132 113.543C77.6434 113.901 76.7093 114.498 76.041 114.858C74.9613 115.425 74.7692 115.645 74.1051 116.854C73.2706 118.47 72.2504 119.304 71.0626 119.43C69.4883 119.571 69.0803 119.401 68.384 118.299C67.8334 117.473 67.5151 117.179 66.4041 116.663C64.6566 115.804 63.5076 114.961 62.378 113.635C61.7448 112.914 61.4587 112.408 61.5196 112.117C61.627 111.576 61.6073 111.569 62.9792 112.537C63.587 112.959 64.8616 113.579 65.8234 113.952C67.4251 114.535 67.6174 114.56 68.1043 114.268C68.4761 114.047 68.7598 113.636 69.018 112.927C69.4628 111.705 69.7664 111.547 72.1187 111.176C73.8025 110.918 74.805 110.502 75.6993 109.644C76.1968 109.2 76.3673 108.793 76.7706 107.377C77.4088 105.132 77.2231 104.35 75.5773 102.412C74.5124 101.153 73.2076 98.6472 72.8849 97.2574C72.7136 96.436 72.7402 95.9323 73.0056 95.203C73.472 93.9217 72.9736 93.7725 72.3728 92.4502C71.0626 89.5666 72.1187 83.1357 75 83.1357C78.1016 83.1357 79.1304 87.7889 78.6177 89.5666Z'
// 尾巴路径
export const tailPath = 'M0 0L0 0M180 180L180 180M90.8124 91.8759C87.2571 91.2536 78.8116 92.8819 75.5554 94.3787C72.9437 95.5783 72.5848 95.4033 73.4587 93.3839C74.0704 91.9591 74.0912 91.8025 73.6531 91.5054C72.6757 90.8342 64.9255 92.7793 60.8364 94.7314C59.3585 95.4279 56.9684 96.4578 55.467 97.0317C53.5765 97.7772 51.7555 98.7789 49.4593 100.299C47.5626 101.57 46.1415 102.377 46.0727 102.177C46.0268 102.043 46.3626 100.957 46.8318 99.8237C47.9128 97.2659 49.4453 95.262 51.6064 93.6202C53.4129 92.2501 53.4791 92.1713 52.8736 91.8759C51.9765 91.4384 50.8292 91.6848 46.6801 93.1907C40.4621 95.4663 37.7529 96.9797 32.5563 101.032C28.4125 104.291 27.3497 105.218 25.7269 107.122C23.9054 109.263 23.7076 108.416 25.2511 105.195C26.0286 103.601 26.7649 102.376 27.3833 101.677C27.9137 101.102 28.7741 100.021 29.2804 99.2673C30.2936 97.8161 32.183 95.7638 33.1915 95.0051C34.0562 94.3707 34.1208 94.1243 33.448 93.7962C32.6407 93.4024 25.9325 95.7724 21.8559 97.8695C16.28 100.764 13.2861 102.861 8.92598 106.849C8.00765 107.707 7.04394 108.488 6.77693 108.58C6.34303 108.729 6.37535 108.606 7.03551 107.594C10.4344 102.276 14.6261 98.1786 19.7868 95.0539C23.8269 92.6332 32.3086 88.9605 35.094 88.4292C36.6539 88.1339 36.4259 87.6336 34.3982 86.8391C32.2474 86.0125 31.633 85.963 25.6955 86.013C22.9721 86.0187 20.7165 85.9191 20.6706 85.7855C20.5443 85.4182 24.9855 84.1103 26.9595 83.9336C27.8627 83.8461 29.7136 83.6372 31.1295 83.4662C35.7116 82.8941 39.7988 83.1088 44.988 84.1946C46.9563 84.5988 47.906 84.7007 48.0155 84.4762C48.2564 83.9822 46.4508 83.0738 42.4527 81.6518C37.1554 79.763 36.975 79.5638 40.6919 79.5702C46.5741 79.5766 52.372 80.0976 57.8616 81.0798C59.628 81.3855 61.1817 81.6152 61.3485 81.5576C61.9827 81.3389 59.9048 79.9641 57.3383 78.8513C55.9375 78.2515 54.7937 77.6936 54.8156 77.6487C54.8923 77.4916 58.8444 77.5849 60.5764 77.7904C62.9342 78.0788 66.2105 78.7041 68.5271 79.3615C69.7246 79.6954 71.0222 79.9948 71.4018 80.0132C72.3625 80.0927 90.0154 82.9782 93.1439 84.4757C100.869 88.2164 93.5739 92.3613 90.8124 91.8759Z'
// 飞行路径,需要自己进行采集
export const points = [{ "x": 240.68017578125, "y": 619.9313354492188 }, { "x": 237.16748046875, "y": 619.9313354492188 }, { "x": 229.5886993408203, "y": 619.9313354492188 }, { "x": 218.7652130126953, "y": 619.9313354492188 }, { "x": 208.68983459472656, "y": 619.9313354492188 }, { "x": 198.7582244873047, "y": 619.9313354492188 }, { "x": 188.19764709472656, "y": 619.9313354492188 }, { "x": 177.92666625976562, "y": 619.9313354492188 }, { "x": 169.24285888671875, "y": 619.9313354492188 }, { "x": 162.76707458496094, "y": 619.90576171875 }, { "x": 157.11436462402344, "y": 619.3753662109375 }, { "x": 151.916259765625, "y": 617.8464965820312 }, { "x": 146.44532775878906, "y": 614.79443359375 }, { "x": 141.35694885253906, "y": 610.5438232421875 }, { "x": 136.59365844726562, "y": 606.452880859375 }, { "x": 130.99305725097656, "y": 601.93896484375 }, { "x": 125.08781433105469, "y": 596.7733764648438 }, { "x": 120.15219116210938, "y": 592.136474609375 }, { "x": 116.80934143066406, "y": 588.458984375 }, { "x": 113.78790283203125, "y": 584.1371459960938 }, { "x": 111.16006469726562, "y": 578.9271240234375 }, { "x": 109.58747863769531, "y": 573.712646484375 }, { "x": 108.3077392578125, "y": 568.3594360351562 }, { "x": 107.76815795898438, "y": 562.3731689453125 }, { "x": 107.76815795898438, "y": 555.2154541015625 }, { "x": 107.98951721191406, "y": 548.1558227539062 }, { "x": 109.78890991210938, "y": 541.4668579101562 }, { "x": 114.05853271484375, "y": 534.4695434570312 }, { "x": 122.20445251464844, "y": 525.45166015625 }, { "x": 136.9500732421875, "y": 515.6165161132812 }, { "x": 157.74520874023438, "y": 506.60687255859375 }, { "x": 178.44725036621094, "y": 500.76837158203125 }, { "x": 196.227783203125, "y": 498.088134765625 }, { "x": 215.2079315185547, "y": 495.2755126953125 }, { "x": 233.23080444335938, "y": 492.6033935546875 }, { "x": 244.28720092773438, "y": 490.75262451171875 }, { "x": 251.85800170898438, "y": 489.48492431640625 }, { "x": 258.7664794921875, "y": 488.404052734375 }, { "x": 264.0390930175781, "y": 487.16204833984375 }, { "x": 269.918701171875, "y": 485.61126708984375 }, { "x": 277.47076416015625, "y": 484.013427734375 }, { "x": 287.82830810546875, "y": 480.82330322265625 }, { "x": 298.5936279296875, "y": 477.044677734375 }, { "x": 305.9586181640625, "y": 474.2325439453125 }, { "x": 312.45745849609375, "y": 470.76605224609375 }, { "x": 318.8465576171875, "y": 465.93499755859375 }, { "x": 321.8755798339844, "y": 461.009765625 }, { "x": 322.068115234375, "y": 456.14715576171875 }, { "x": 320.0497741699219, "y": 450.62628173828125 }, { "x": 314.4300842285156, "y": 444.45654296875 }, { "x": 303.6468200683594, "y": 436.4105224609375 }, { "x": 292.0837097167969, "y": 429.67938232421875 }, { "x": 281.54437255859375, "y": 425.91156005859375 }, { "x": 269.50732421875, "y": 422.2828369140625 }, { "x": 257.15142822265625, "y": 419.71038818359375 }, { "x": 243.4276580810547, "y": 417.99041748046875 }, { "x": 230.0701141357422, "y": 416.81005859375 }, { "x": 216.662109375, "y": 416.43853759765625 }, { "x": 202.357421875, "y": 415.23626708984375 }, { "x": 188.71206665039062, "y": 413.421875 }, { "x": 176.9940948486328, "y": 411.5537109375 }, { "x": 167.32138061523438, "y": 409.032958984375 }, { "x": 159.53192138671875, "y": 406.66485595703125 }, { "x": 153.8592529296875, "y": 404.00830078125 }, { "x": 149.92138671875, "y": 401.26055908203125 }, { "x": 144.5467529296875, "y": 396.1421203613281 }, { "x": 143.97755432128906, "y": 395.2511901855469 }, { "x": 142.59359741210938, "y": 392.8650207519531 }, { "x": 141.24720764160156, "y": 389.6397705078125 }, { "x": 140.59629821777344, "y": 386.4396057128906 }, { "x": 140.3038330078125, "y": 384.0779724121094 }, { "x": 140.13063049316406, "y": 381.7547912597656 }, { "x": 140.13063049316406, "y": 378.6162109375 }, { "x": 140.692138671875, "y": 374.965576171875 }, { "x": 143.1006317138672, "y": 370.5981140136719 }, { "x": 147.02401733398438, "y": 365.4375 }, { "x": 152.55978393554688, "y": 358.6809997558594 }, { "x": 159.8966827392578, "y": 350.9884948730469 }, { "x": 171.38970947265625, "y": 341.6991271972656 }, { "x": 187.34690856933594, "y": 331.4367980957031 }, { "x": 203.0254669189453, "y": 323.2778625488281 }, { "x": 218.34814453125, "y": 317.5356140136719 }, { "x": 233.5912628173828, "y": 314.1258544921875 }, { "x": 248.14048767089844, "y": 311.82769775390625 }, { "x": 262.38958740234375, "y": 310.59588623046875 }, { "x": 276.1289978027344, "y": 310.48162841796875 }, { "x": 288.9454345703125, "y": 310.48162841796875 }, { "x": 299.1197204589844, "y": 310.48162841796875 }, { "x": 306.1456604003906, "y": 310.48162841796875 }, { "x": 311.2547912597656, "y": 310.48162841796875 }, { "x": 314.99505615234375, "y": 310.48162841796875 }, { "x": 316.98236083984375, "y": 310.48162841796875 }, { "x": 317.59527587890625, "y": 310.48162841796875 }, { "x": 317.861083984375, "y": 310.48162841796875 }, { "x": 317.8200988769531, "y": 310.48162841796875 }, { "x": 315.5401916503906, "y": 310.32904052734375 }, { "x": 309.04949951171875, "y": 308.79571533203125 }, { "x": 298.0025329589844, "y": 305.4224853515625 }, { "x": 286.5418701171875, "y": 301.0468444824219 }, { "x": 272.80047607421875, "y": 296.5848083496094 }, { "x": 257.3282470703125, "y": 293.7320251464844 }, { "x": 243.0431365966797, "y": 290.60211181640625 }, { "x": 228.6371307373047, "y": 286.8008728027344 }, { "x": 217.15330505371094, "y": 283.93634033203125 }, { "x": 209.3570098876953, "y": 281.76666259765625 }, { "x": 203.46693420410156, "y": 279.4900817871094 }, { "x": 198.05087280273438, "y": 276.8197021484375 }, { "x": 193.6062469482422, "y": 275.11236572265625 }, { "x": 189.9735565185547, "y": 273.37603759765625 }, { "x": 186.69815063476562, "y": 271.2194519042969 }, { "x": 183.22525024414062, "y": 268.7884826660156 }, { "x": 180.17440795898438, "y": 266.5411376953125 }, { "x": 177.65419006347656, "y": 264.24462890625 }, { "x": 174.80120849609375, "y": 261.5429382324219 }, { "x": 171.85023498535156, "y": 258.3822021484375 }, { "x": 168.899658203125, "y": 254.1480712890625 }, { "x": 166.12158203125, "y": 250.04666137695312 }, { "x": 164.15333557128906, "y": 246.96981811523438 }, { "x": 162.81851196289062, "y": 243.86300659179688 }, { "x": 161.93875122070312, "y": 239.70419311523438 }, { "x": 161.68470764160156, "y": 236.181884765625 }, { "x": 161.90135192871094, "y": 233.32974243164062 }, { "x": 163.8120880126953, "y": 230.02099609375 }, { "x": 168.0439453125, "y": 227.33233642578125 }, { "x": 175.92996215820312, "y": 224.67355346679688 }, { "x": 187.9339599609375, "y": 221.59375 }, { "x": 203.31834411621094, "y": 219.12448120117188 }, { "x": 222.53160095214844, "y": 217.0802001953125 }, { "x": 242.6642608642578, "y": 215.90658569335938 }, { "x": 256.9416809082031, "y": 215.74447631835938 }, { "x": 268.9786071777344, "y": 215.74447631835938 }, { "x": 284.5271911621094, "y": 215.74447631835938 }, { "x": 297.1941833496094, "y": 215.74447631835938 }, { "x": 305.4105529785156, "y": 215.74447631835938 }, { "x": 310.194091796875, "y": 215.78024291992188 }, { "x": 313.143798828125, "y": 216.15505981445312 }, { "x": 316.34844970703125, "y": 216.659423828125 }, { "x": 318.306640625, "y": 217.30810546875 }, { "x": 319.3393859863281, "y": 218.14117431640625 }, { "x": 319.89501953125, "y": 219.2611083984375 }, { "x": 319.5179443359375, "y": 220.2271728515625 }, { "x": 315.24530029296875, "y": 220.84469604492188 }, { "x": 306.94305419921875, "y": 221.38677978515625 }, { "x": 299.4778137207031, "y": 221.5072021484375 }, { "x": 289.6269226074219, "y": 221.08856201171875 }, { "x": 275.030029296875, "y": 219.47979736328125 }, { "x": 260.802001953125, "y": 216.12811279296875 }, { "x": 249.68431091308594, "y": 210.86492919921875 }, { "x": 242.1542510986328, "y": 204.3511962890625 }, { "x": 237.6493682861328, "y": 198.71051025390625 }, { "x": 235.77809143066406, "y": 193.0162353515625 }, { "x": 235.56259155273438, "y": 185.22360229492188 }, { "x": 238.0032958984375, "y": 175.38577270507812 }, { "x": 245.76126098632812, "y": 164.13626098632812 }, { "x": 259.57177734375, "y": 153.12179565429688 }, { "x": 278.564208984375, "y": 144.51473999023438 }, { "x": 302.4516296386719, "y": 138.3804168701172 }, { "x": 330.2884216308594, "y": 133.30059814453125 }, { "x": 361.16925048828125, "y": 129.9122314453125 }, { "x": 394.4840087890625, "y": 128.80062866210938 }, { "x": 424.6151428222656, "y": 128.80062866210938 }, { "x": 453.4946594238281, "y": 128.80062866210938 }, { "x": 484.2202453613281, "y": 128.80062866210938 }, { "x": 512.13330078125, "y": 128.80062866210938 }, { "x": 532.3580322265625, "y": 128.80062866210938 }, { "x": 549.3466796875, "y": 128.80062866210938 }, { "x": 566.7947387695312, "y": 128.80062866210938 }, { "x": 579.2771606445312, "y": 128.80062866210938 }, { "x": 588.5029296875, "y": 128.80062866210938 }, { "x": 597.775634765625, "y": 128.80062866210938 }, { "x": 605.691650390625, "y": 128.80062866210938 }, { "x": 613.2927856445312, "y": 128.81314086914062 }, { "x": 622.7910766601562, "y": 129.59234619140625 }, { "x": 632.660400390625, "y": 131.49383544921875 }, { "x": 639.6019287109375, "y": 133.365478515625 }, { "x": 645.1209716796875, "y": 136.09536743164062 }, { "x": 649.9264526367188, "y": 138.5926513671875 }, { "x": 652.12353515625, "y": 139.7490692138672 }, { "x": 653.4529418945312, "y": 141.6261749267578 }, { "x": 654.1038208007812, "y": 143.62002563476562 }, { "x": 654.23388671875, "y": 146.36395263671875 }, { "x": 654.23388671875, "y": 149.55697631835938 }, { "x": 654.23388671875, "y": 153.18130493164062 }, { "x": 654.23388671875, "y": 157.92684936523438 }, { "x": 654.706787109375, "y": 163.259033203125 }, { "x": 657.148681640625, "y": 169.21258544921875 }, { "x": 663.7310791015625, "y": 176.93746948242188 }, { "x": 675.393798828125, "y": 185.82260131835938 }, { "x": 697.8765869140625, "y": 197.08489990234375 }, { "x": 730.101318359375, "y": 209.26373291015625 }, { "x": 756.5614624023438, "y": 217.45968627929688 }, { "x": 772.0196533203125, "y": 222.32958984375 }, { "x": 783.5703125, "y": 226.8521728515625 }, { "x": 793.1532592773438, "y": 231.53128051757812 }, { "x": 798.4785766601562, "y": 234.990234375 }, { "x": 798.71630859375, "y": 237.58175659179688 }, { "x": 786.244140625, "y": 239.35009765625 }, { "x": 743.7654418945312, "y": 240.76577758789062 }, { "x": 676.855224609375, "y": 241.41348266601562 }, { "x": 623.1321411132812, "y": 241.41348266601562 }, { "x": 579.6886596679688, "y": 241.41348266601562 }, { "x": 543.5797729492188, "y": 241.41348266601562 }, { "x": 522.3009033203125, "y": 241.41348266601562 }, { "x": 503.5755310058594, "y": 241.5670166015625 }, { "x": 490.5221252441406, "y": 243.00296020507812 }, { "x": 483.81689453125, "y": 245.310546875 }, { "x": 481.04052734375, "y": 247.64443969726562 }, { "x": 479.6584777832031, "y": 250.12359619140625 }, { "x": 479.2035217285156, "y": 253.12911987304688 }, { "x": 479.2035217285156, "y": 257.1519470214844 }, { "x": 479.6007080078125, "y": 262.23834228515625 }, { "x": 482.7340087890625, "y": 268.78021240234375 }, { "x": 490.72222900390625, "y": 277.37506103515625 }, { "x": 510.3592529296875, "y": 292.5055847167969 }, { "x": 540.8040771484375, "y": 310.10015869140625 }, { "x": 563.6721801757812, "y": 320.01885986328125 }, { "x": 576.6270751953125, "y": 324.7447204589844 }, { "x": 586.8014526367188, "y": 328.3592224121094 }, { "x": 595.235595703125, "y": 331.36962890625 }, { "x": 602.155029296875, "y": 334.5262756347656 }, { "x": 606.0723266601562, "y": 337.7934265136719 }, { "x": 607.2012939453125, "y": 341.0264892578125 }, { "x": 603.1683349609375, "y": 344.99822998046875 }, { "x": 593.0477294921875, "y": 349.50506591796875 }, { "x": 580.65673828125, "y": 353.9184265136719 }, { "x": 568.4353637695312, "y": 358.82916259765625 }, { "x": 555.0886840820312, "y": 365.9188537597656 }, { "x": 543.2350463867188, "y": 373.9908752441406 }, { "x": 536.06591796875, "y": 380.5014953613281 }, { "x": 532.3113403320312, "y": 386.6781005859375 }, { "x": 531.355224609375, "y": 394.53863525390625 }, { "x": 536.2149047851562, "y": 404.17095947265625 }, { "x": 565.3321533203125, "y": 421.64447021484375 }, { "x": 621.1520385742188, "y": 446.31939697265625 }, { "x": 673.0527954101562, "y": 465.65069580078125 }, { "x": 706.0294799804688, "y": 476.9395751953125 }, { "x": 735.7498168945312, "y": 488.38800048828125 }, { "x": 764.4776611328125, "y": 501.72955322265625 }, { "x": 781.2689819335938, "y": 512.3893432617188 }, { "x": 788.6593627929688, "y": 520.6854858398438 }, { "x": 790.4196166992188, "y": 527.2539672851562 }, { "x": 787.0365600585938, "y": 533.9720458984375 }, { "x": 774.5760498046875, "y": 541.3004150390625 }, { "x": 746.854736328125, "y": 548.428466796875 }, { "x": 708.3807373046875, "y": 552.2017822265625 }, { "x": 665.1015014648438, "y": 552.3807983398438 }, { "x": 615.05615234375, "y": 550.266845703125 }, { "x": 578.5239868164062, "y": 547.2900390625 }, { "x": 562.2446899414062, "y": 545.7000122070312 }, { "x": 544.4217529296875, "y": 543.8775024414062 }, { "x": 526.6846923828125, "y": 542.6094360351562 }, { "x": 515.3068237304688, "y": 542.4368286132812 }, { "x": 507.82373046875, "y": 542.8500366210938 }, { "x": 504.8055419921875, "y": 545.9140014648438 }, { "x": 504.30499267578125, "y": 551.2197265625 }, { "x": 504.30499267578125, "y": 556.6761474609375 }, { "x": 504.9576721191406, "y": 564.2420043945312 }, { "x": 514.617431640625, "y": 578.2378540039062 }, { "x": 544.9794311523438, "y": 601.0413208007812 }, { "x": 583.1019897460938, "y": 622.4859008789062 }, { "x": 618.81689453125, "y": 638.5440673828125 }, { "x": 642.4320068359375, "y": 648.4472045898438 }, { "x": 651.7089233398438, "y": 652.211181640625 }, { "x": 669.0797119140625, "y": 660.046630859375 }, { "x": 684.70703125, "y": 667.7074584960938 }, { "x": 688.8822021484375, "y": 671.3955688476562 }, { "x": 690.0725708007812, "y": 673.8245849609375 }, { "x": 686.0026245117188, "y": 675.6801147460938 }, { "x": 673.8009643554688, "y": 678.2551879882812 }, { "x": 650.9788818359375, "y": 679.96728515625 }, { "x": 620.3065185546875, "y": 680.3471069335938 }, { "x": 578.73681640625, "y": 679.3377075195312 }, { "x": 531.990234375, "y": 675.6918334960938 }, { "x": 494.20159912109375, "y": 671.4276733398438 }, { "x": 466.2966003417969, "y": 668.7980346679688 }, { "x": 440.8201599121094, "y": 665.1271362304688 }, { "x": 418.58343505859375, "y": 660.7180786132812 }, { "x": 406.6043395996094, "y": 657.805908203125 }, { "x": 398.4539489746094, "y": 653.6334228515625 }, { "x": 392.99786376953125, "y": 647.87939453125 }, { "x": 391.8678283691406, "y": 641.4186401367188 }, { "x": 391.8678283691406, "y": 634.0491333007812 }, { "x": 392.7903747558594, "y": 627.6297607421875 }, { "x": 395.8005676269531, "y": 621.0133666992188 }, { "x": 398.95135498046875, "y": 615.7557983398438 }, { "x": 401.52130126953125, "y": 612.235107421875 }, { "x": 404.3561706542969, "y": 608.5206298828125 }, { "x": 406.3377685546875, "y": 606.1433715820312 }, { "x": 407.24114990234375, "y": 604.6851196289062 }, { "x": 407.7037048339844, "y": 603.7018432617188 }, { "x": 407.9521179199219, "y": 603.0899658203125 }, { "x": 407.67828369140625, "y": 603.0899658203125 }, { "x": 404.4674377441406, "y": 603.0899658203125 }, { "x": 395.6679992675781, "y": 603.364990234375 }, { "x": 382.4545593261719, "y": 604.6863403320312 }, { "x": 366.3904113769531, "y": 607.2435913085938 }, { "x": 349.9324951171875, "y": 611.2557983398438 }, { "x": 336.60040283203125, "y": 616.344970703125 }, { "x": 325.4888610839844, "y": 622.14794921875 }, { "x": 315.5075378417969, "y": 628.2860717773438 }, { "x": 307.19244384765625, "y": 634.8521118164062 }, { "x": 300.7373962402344, "y": 641.4320678710938 }, { "x": 296.1580810546875, "y": 647.2201538085938 }, { "x": 292.9333190917969, "y": 653.7471923828125 }, { "x": 291.2640686035156, "y": 661.154052734375 }, { "x": 290.5333251953125, "y": 669.614990234375 }, { "x": 290.2293701171875, "y": 680.0028076171875 }, { "x": 290.4056396484375, "y": 691.5325317382812 }, { "x": 291.726806640625, "y": 702.7445068359375 }, { "x": 295.44091796875, "y": 713.4786987304688 }, { "x": 302.1435852050781, "y": 725.7667236328125 }, { "x": 311.6299133300781, "y": 739.0214233398438 }, { "x": 323.9136962890625, "y": 751.3807983398438 }, { "x": 338.2168884277344, "y": 762.637451171875 }, { "x": 353.5345458984375, "y": 772.43603515625 }, { "x": 369.62249755859375, "y": 780.6912841796875 }, { "x": 388.5640869140625, "y": 788.6135864257812 }, { "x": 410.2676696777344, "y": 795.5213623046875 }, { "x": 432.339599609375, "y": 799.5706176757812 }, { "x": 452.6488342285156, "y": 801.21240234375 }, { "x": 472.8461608886719, "y": 801.8333129882812 }, { "x": 489.4183654785156, "y": 802.161376953125 }, { "x": 503.13568115234375, "y": 802.161376953125 }, { "x": 517.236328125, "y": 802.161376953125 }, { "x": 528.203857421875, "y": 801.45849609375 }, { "x": 537.59423828125, "y": 799.353271484375 }, { "x": 548.985107421875, "y": 795.3729858398438 }, { "x": 560.3685913085938, "y": 790.9413452148438 }, { "x": 570.54248046875, "y": 786.0970458984375 }, { "x": 581.646484375, "y": 780.0775756835938 }, { "x": 591.6048583984375, "y": 773.3500366210938 }, { "x": 600.2791137695312, "y": 765.9856567382812 }, { "x": 607.5302124023438, "y": 759.160888671875 }, { "x": 614.6248779296875, "y": 750.2822875976562 }, { "x": 617.0553588867188, "y": 745.6726684570312 }, { "x": 623.7686157226562, "y": 731.5681762695312 }, { "x": 625.7848510742188, "y": 726.5850830078125 }, { "x": 629.7725219726562, "y": 716.7808837890625 }, { "x": 633.0860595703125, "y": 706.7591552734375 }, { "x": 635.4005737304688, "y": 696.3844604492188 }, { "x": 636.4208374023438, "y": 683.893798828125 }, { "x": 636.4686279296875, "y": 669.082275390625 }, { "x": 635.4995727539062, "y": 653.8338623046875 }, { "x": 629.152587890625, "y": 637.3683471679688 }, { "x": 608.4226684570312, "y": 613.6268310546875 }, { "x": 576.136962890625, "y": 587.475830078125 }, { "x": 548.6612548828125, "y": 571.4052734375 }, { "x": 521.6805419921875, "y": 558.6323852539062 }, { "x": 492.6398010253906, "y": 544.9703369140625 }, { "x": 469.14532470703125, "y": 534.3778076171875 }, { "x": 448.36920166015625, "y": 525.2407836914062 }, { "x": 429.9062194824219, "y": 515.7879638671875 }, { "x": 413.9791564941406, "y": 506.17962646484375 }, { "x": 400.7943115234375, "y": 497.472900390625 }, { "x": 388.9090576171875, "y": 488.112548828125 }, { "x": 377.9210510253906, "y": 478.0718994140625 }, { "x": 368.9584655761719, "y": 468.98681640625 }, { "x": 361.71710205078125, "y": 460.171142578125 }, { "x": 355.8834228515625, "y": 450.62921142578125 }, { "x": 350.9006652832031, "y": 440.2552490234375 }, { "x": 347.6327819824219, "y": 430.16241455078125 }, { "x": 346.73272705078125, "y": 420.04010009765625 }, { "x": 346.7481384277344, "y": 405.7080078125 }, { "x": 350.09588623046875, "y": 391.0255126953125 }, { "x": 358.6235046386719, "y": 379.22845458984375 }, { "x": 370.6874084472656, "y": 367.3245849609375 }, { "x": 391.6672668457031, "y": 352.2784118652344 }, { "x": 422.4637756347656, "y": 336.4080810546875 }, { "x": 457.0167541503906, "y": 324.55938720703125 }, { "x": 488.33038330078125, "y": 316.6554870605469 }, { "x": 514.0612182617188, "y": 311.38885498046875 }, { "x": 536.445068359375, "y": 307.8260192871094 }, { "x": 552.0476684570312, "y": 306.7522277832031 }, { "x": 566.333740234375, "y": 306.7522277832031 }, { "x": 577.8405151367188, "y": 306.7522277832031 }, { "x": 582.6895751953125, "y": 308.73919677734375 }, { "x": 586.988525390625, "y": 315.0747985839844 }, { "x": 591.1666259765625, "y": 326.05120849609375 }, { "x": 595.2051391601562, "y": 340.44476318359375 }, { "x": 600.125244140625, "y": 357.70843505859375 }, { "x": 607.2614135742188, "y": 377.67156982421875 }, { "x": 620.7417602539062, "y": 408.38153076171875 }, { "x": 635.4329833984375, "y": 435.36761474609375 }, { "x": 651.9332885742188, "y": 453.89996337890625 }, { "x": 674.8692626953125, "y": 475.10736083984375 }, { "x": 700.0055541992188, "y": 490.81195068359375 }, { "x": 726.2293090820312, "y": 500.3675537109375 }, { "x": 754.4906005859375, "y": 505.08697509765625 }, { "x": 785.3385620117188, "y": 506.2701416015625 }, { "x": 831.2523193359375, "y": 502.46630859375 }, { "x": 845.0145874023438, "y": 497.31634521484375 }, { "x": 873.06005859375, "y": 484.5673828125 }, { "x": 899.38623046875, "y": 468.30157470703125 }, { "x": 921.6510620117188, "y": 450.6734619140625 }, { "x": 938.024169921875, "y": 434.03887939453125 }, { "x": 951.522216796875, "y": 415.07000732421875 }, { "x": 962.416748046875, "y": 393.0771484375 }, { "x": 966.2839965820312, "y": 371.341064453125 }, { "x": 966.6035766601562, "y": 349.3255310058594 }, { "x": 966.6035766601562, "y": 329.162353515625 }, { "x": 966.6035766601562, "y": 307.9606018066406 }, { "x": 964.268798828125, "y": 282.5665283203125 }, { "x": 952.5144653320312, "y": 249.345947265625 }, { "x": 931.0427856445312, "y": 214.33270263671875 }, { "x": 901, "y": 185.92697143554688 }, { "x": 860.8995361328125, "y": 159.675048828125 }, { "x": 814.1103515625, "y": 134.7515411376953 }, { "x": 760.7182006835938, "y": 111.79804992675781 }, { "x": 704.6653442382812, "y": 93.65969848632812 }, { "x": 657.6210327148438, "y": 81.775390625 }, { "x": 599.2645263671875, "y": 72.146240234375 }, { "x": 581.0028076171875, "y": 71.12002563476562 }, { "x": 541.9885864257812, "y": 68.24995422363281 }, { "x": 506.0842590332031, "y": 65.91317749023438 }, { "x": 479.1668701171875, "y": 65.42025756835938 }, { "x": 457.49737548828125, "y": 65.42025756835938 }, { "x": 438.4147644042969, "y": 65.42025756835938 }, { "x": 418.7383728027344, "y": 65.42025756835938 }, { "x": 395.1996765136719, "y": 65.42025756835938 }, { "x": 372.6510314941406, "y": 65.42025756835938 }, { "x": 352.2135314941406, "y": 65.42025756835938 }, { "x": 329.3287353515625, "y": 65.42025756835938 }, { "x": 304.57049560546875, "y": 65.42025756835938 }, { "x": 276.0907287597656, "y": 65.59109497070312 }, { "x": 246.6725311279297, "y": 66.08988952636719 }, { "x": 222.34190368652344, "y": 68.39924621582031 }, { "x": 191.87466430664062, "y": 73.616455078125 }, { "x": 158.13011169433594, "y": 78.61314392089844 }, { "x": 129.47677612304688, "y": 84.56382751464844 }, { "x": 106.76303100585938, "y": 91.47647094726562 }, { "x": 89.997802734375, "y": 97.55107116699219 }, { "x": 74.09689331054688, "y": 103.03242492675781 }, { "x": 60.96476745605469, "y": 108.47276306152344 }, { "x": 50.32142639160156, "y": 114.75694274902344 }, { "x": 41.684967041015625, "y": 121.04855346679688 }, { "x": 34.23419189453125, "y": 128.00656127929688 }, { "x": 28.106246948242188, "y": 135.4747314453125 }, { "x": 22.427871704101562, "y": 144.18844604492188 }, { "x": 16.883819580078125, "y": 153.76730346679688 }, { "x": 11.298095703125, "y": 164.99050903320312 }, { "x": 4.9309234619140625, "y": 181.24609375 }, { "x": -0.7172393798828125, "y": 198.5885009765625 }, { "x": -3.7152252197265625, "y": 209.95803833007812 }, { "x": -5.8972015380859375, "y": 227.34268188476562 }, { "x": -7.34222412109375, "y": 250.5960693359375 }, { "x": -7.092071533203125, "y": 270.09100341796875 }, { "x": -2.86279296875, "y": 290.55157470703125 }, { "x": 5.4393768310546875, "y": 307.7371520996094 }, { "x": 16.07293701171875, "y": 320.25506591796875 }, { "x": 31.327224731445312, "y": 332.78460693359375 }, { "x": 49.14207458496094, "y": 343.3414001464844 }, { "x": 65.80300903320312, "y": 349.2952575683594 }, { "x": 79.10273742675781, "y": 352.4767150878906 }, { "x": 91.363525390625, "y": 355.27301025390625 }, { "x": 102.94932556152344, "y": 358.5715637207031 }, { "x": 111.59992980957031, "y": 361.88641357421875 }, { "x": 118.16902160644531, "y": 365.5347595214844 }, { "x": 122.41239929199219, "y": 369.3211975097656 }, { "x": 124.37368774414062, "y": 372.84014892578125 }, { "x": 125.05294799804688, "y": 377.4460754394531 }, { "x": 125.26097106933594, "y": 384.6080322265625 }, { "x": 125.26097106933594, "y": 392.2833557128906 }, { "x": 124.56707763671875, "y": 399.7890625 }, { "x": 122.90251159667969, "y": 407.61810302734375 }, { "x": 120.08699035644531, "y": 416.51727294921875 }, { "x": 116.98551940917969, "y": 425.34039306640625 }, { "x": 114.64743041992188, "y": 431.181396484375 }, { "x": 111.29167175292969, "y": 438.29150390625 }, { "x": 107.22103881835938, "y": 445.77642822265625 }, { "x": 103.44757080078125, "y": 450.12005615234375 }, { "x": 98.8018798828125, "y": 453.73809814453125 }, { "x": 94.21209716796875, "y": 456.9820556640625 }, { "x": 89.39093017578125, "y": 459.7821044921875 }, { "x": 84.64309692382812, "y": 462.33441162109375 }, { "x": 80.09513854980469, "y": 465.67901611328125 }, { "x": 75.51506042480469, "y": 470.25592041015625 }, { "x": 71.58799743652344, "y": 476.2674560546875 }, { "x": 67.99029541015625, "y": 483.40118408203125 }, { "x": 64.99017333984375, "y": 491.70166015625 }, { "x": 61.953277587890625, "y": 504.3084716796875 }, { "x": 59.7108154296875, "y": 521.2378540039062 }, { "x": 58.95039367675781, "y": 538.983154296875 }, { "x": 58.84501647949219, "y": 557.3832397460938 }, { "x": 58.862945556640625, "y": 573.5288696289062 }, { "x": 59.79389953613281, "y": 588.6983642578125 }, { "x": 62.32029724121094, "y": 605.6407470703125 }, { "x": 65.40573120117188, "y": 619.1212158203125 }, { "x": 68.66693115234375, "y": 629.6984252929688 }, { "x": 71.980712890625, "y": 639.4208374023438 }, { "x": 74.51643371582031, "y": 646.5446166992188 }, { "x": 77.03927612304688, "y": 653.4844360351562 }, { "x": 80.38827514648438, "y": 662.3212890625 }, { "x": 83.64006042480469, "y": 671.7353515625 }, { "x": 85.53666687011719, "y": 682.173095703125 }, { "x": 86.34194946289062, "y": 692.8223266601562 }, { "x": 87.326904296875, "y": 703.166748046875 }, { "x": 87.99745178222656, "y": 714.1890258789062 }, { "x": 88.00625610351562, "y": 726.290283203125 }, { "x": 88.29582214355469, "y": 737.6028442382812 }, { "x": 89.57905578613281, "y": 748.0625610351562 }, { "x": 91.5301513671875, "y": 758.8668212890625 }, { "x": 93.104248046875, "y": 767.9542236328125 }, { "x": 95.08824157714844, "y": 775.0514526367188 }, { "x": 98.59120178222656, "y": 781.5836791992188 }, { "x": 103.49040222167969, "y": 787.306884765625 }, { "x": 110.89183044433594, "y": 792.4856567382812 }, { "x": 120.35664367675781, "y": 796.986083984375 }, { "x": 131.05345153808594, "y": 799.8377075195312 }, { "x": 146.4026336669922, "y": 802.8185424804688 }, { "x": 164.08346557617188, "y": 805.3758544921875 }, { "x": 181.4142303466797, "y": 806.1599731445312 }, { "x": 199.66864013671875, "y": 806.6900024414062 }, { "x": 221.5491180419922, "y": 807.4603271484375 }, { "x": 252.64785766601562, "y": 808.172607421875 }, { "x": 285.54962158203125, "y": 808.5690307617188 }, { "x": 310.8915710449219, "y": 808.7109375 }, { "x": 332.8196716308594, "y": 808.7109375 }, { "x": 358.0156555175781, "y": 808.7109375 }, { "x": 384.8296813964844, "y": 807.3670043945312 }, { "x": 411.29339599609375, "y": 804.3628540039062 }, { "x": 442.8100891113281, "y": 801.0768432617188 }, { "x": 477.5752258300781, "y": 798.9480590820312 }, { "x": 508.950439453125, "y": 798.4451293945312 }, { "x": 538.9387817382812, "y": 798.4451293945312 }, { "x": 564.75341796875, "y": 798.4451293945312 }, { "x": 584.5881958007812, "y": 798.4451293945312 }, { "x": 601.953369140625, "y": 798.4451293945312 }, { "x": 620.5767211914062, "y": 798.4451293945312 }, { "x": 639.6571655273438, "y": 798.4451293945312 }, { "x": 657.04248046875, "y": 797.0267333984375 }, { "x": 672.5783081054688, "y": 794.7847900390625 }, { "x": 685.9794311523438, "y": 792.885009765625 }, { "x": 698.8792724609375, "y": 790.2440795898438 }, { "x": 710.2398681640625, "y": 786.8981323242188 }, { "x": 721.2791748046875, "y": 782.83984375 }, { "x": 734.6668701171875, "y": 777.8545532226562 }, { "x": 747.7073364257812, "y": 772.646240234375 }, { "x": 759.5094604492188, "y": 766.7468872070312 }, { "x": 771.5577392578125, "y": 759.733642578125 }, { "x": 781.0883178710938, "y": 753.1148071289062 }, { "x": 788.2109375, "y": 746.8663940429688 }, { "x": 793.1058349609375, "y": 739.6290893554688 }, { "x": 794.68798828125, "y": 727.5073852539062 }, { "x": 788.6190795898438, "y": 708.245361328125 }, { "x": 767.307861328125, "y": 680.4276123046875 }, { "x": 727.7404174804688, "y": 642.9824829101562 }, { "x": 711.5218505859375, "y": 630.4267578125 }, { "x": 676.407470703125, "y": 606.6707763671875 }, { "x": 640.7999267578125, "y": 588.7258911132812 }, { "x": 606.5274047851562, "y": 576.7683715820312 }, { "x": 575.0426635742188, "y": 568.8896484375 }, { "x": 552.6344604492188, "y": 566.223876953125 }, { "x": 535.591552734375, "y": 566.223876953125 }, { "x": 513.5349731445312, "y": 566.223876953125 }, { "x": 490.71417236328125, "y": 566.223876953125 }, { "x": 470.91619873046875, "y": 566.223876953125 }, { "x": 451.43157958984375, "y": 566.223876953125 }, { "x": 436.10540771484375, "y": 566.223876953125 }, { "x": 422.48358154296875, "y": 567.4522094726562 }, { "x": 411.7792663574219, "y": 569.078369140625 }, { "x": 404.93634033203125, "y": 570.3853759765625 }, { "x": 398.75958251953125, "y": 572.6610107421875 }, { "x": 394.3447570800781, "y": 575.3125 }, { "x": 391.2296447753906, "y": 577.7244873046875 }, { "x": 387.9983215332031, "y": 580.7376098632812 }, { "x": 384.3946533203125, "y": 584.2405395507812 }, { "x": 380.9334716796875, "y": 587.0499877929688 }, { "x": 377.1268615722656, "y": 589.531982421875 }, { "x": 372.4760437011719, "y": 591.93505859375 }, { "x": 367.4461669921875, "y": 594.3905029296875 }, { "x": 362.775146484375, "y": 596.5431518554688 }, { "x": 358.1034851074219, "y": 598.2348022460938 }, { "x": 352.92523193359375, "y": 600.1163940429688 }, { "x": 348.06719970703125, "y": 601.7010498046875 }, { "x": 343.9253845214844, "y": 603.0943603515625 }, { "x": 339.9208984375, "y": 604.3654174804688 }, { "x": 336.08123779296875, "y": 605.247802734375 }, { "x": 332.54583740234375, "y": 605.9963989257812 }, { "x": 329.61279296875, "y": 606.614990234375 }, { "x": 327.3065490722656, "y": 607.4689331054688 }, { "x": 325.0169372558594, "y": 608.605712890625 }, { "x": 322.6275634765625, "y": 609.6788940429688 }, { "x": 319.49169921875, "y": 610.72119140625 }, { "x": 316.1830139160156, "y": 611.6712036132812 }, { "x": 312.9261169433594, "y": 612.389404296875 }, { "x": 309.51275634765625, "y": 613.1681518554688 }, { "x": 306.0719299316406, "y": 613.6358032226562 }, { "x": 302.7427673339844, "y": 613.6827392578125 }, { "x": 298.90057373046875, "y": 614.3841552734375 }, { "x": 294.8807067871094, "y": 615.4657592773438 }, { "x": 292.061279296875, "y": 615.8929443359375 }, { "x": 289.5340881347656, "y": 615.8929443359375 }, { "x": 287.4205322265625, "y": 616.0133056640625 }, { "x": 285.8788757324219, "y": 616.1865234375 }, { "x": 284.5955810546875, "y": 616.2393188476562 }, { "x": 283.4767761230469, "y": 616.2393188476562 }, { "x": 282.4156494140625, "y": 616.2393188476562 }, { "x": 281.5059509277344, "y": 616.2393188476562 }, { "x": 280.6212158203125, "y": 616.2393188476562 }, { "x": 279.4852294921875, "y": 616.2393188476562 }, { "x": 277.8850402832031, "y": 616.2393188476562 }, { "x": 276.30169677734375, "y": 616.2393188476562 }, { "x": 274.8569641113281, "y": 616.2393188476562 }, { "x": 273.4521179199219, "y": 616.2393188476562 }, { "x": 272.005126953125, "y": 616.2393188476562 }, { "x": 270.5512390136719, "y": 616.2393188476562 }, { "x": 269.2940368652344, "y": 616.2393188476562 }, { "x": 267.755126953125, "y": 616.2393188476562 }, { "x": 266.20233154296875, "y": 616.2393188476562 }, { "x": 264.93341064453125, "y": 616.2393188476562 }, { "x": 263.4519348144531, "y": 616.2393188476562 }, { "x": 261.85809326171875, "y": 616.2393188476562 }, { "x": 260.3700256347656, "y": 616.2393188476562 }, { "x": 259.12042236328125, "y": 616.2393188476562 }, { "x": 257.83538818359375, "y": 616.2393188476562 }, { "x": 256.60528564453125, "y": 616.2393188476562 }, { "x": 255.72703552246094, "y": 616.2393188476562 }, { "x": 254.86056518554688, "y": 616.2393188476562 }, { "x": 254.23611450195312, "y": 616.2393188476562 }, { "x": 253.93235778808594, "y": 616.2393188476562 }, { "x": 253.43484497070312, "y": 616.2393188476562 }, { "x": 253.32794189453125, "y": 616.2393188476562 }, { "x": 253.021728515625, "y": 616.2393188476562 }, { "x": 252.47528076171875, "y": 616.2393188476562 }, { "x": 251.92930603027344, "y": 616.2393188476562 }, { "x": 251.43878173828125, "y": 616.2393188476562 }, { "x": 250.68612670898438, "y": 616.2393188476562 }, { "x": 249.77894592285156, "y": 616.2393188476562 }, { "x": 249.04750061035156, "y": 616.2435302734375 }, { "x": 248.40042114257812, "y": 616.3965454101562 }, { "x": 247.67042541503906, "y": 616.54541015625 }, { "x": 247.07296752929688, "y": 616.54541015625 }, { "x": 246.76023864746094, "y": 616.54541015625 }, { "x": 246.41554260253906, "y": 616.54541015625 }, { "x": 245.97654724121094, "y": 616.54541015625 }, { "x": 245.54678344726562, "y": 616.54541015625 }, { "x": 244.8382110595703, "y": 616.68017578125 }, { "x": 244.02438354492188, "y": 616.8958129882812 }, { "x": 243.07595825195312, "y": 617.0872802734375 }, { "x": 242.03396606445312, "y": 617.3999633789062 }, { "x": 240.95437622070312, "y": 617.8462524414062 }, { "x": 239.62049865722656, "y": 618.1234741210938 }, { "x": 238.59959411621094, "y": 618.1564331054688 }, { "x": 237.91036987304688, "y": 618.1564331054688 }, { "x": 237.21510314941406, "y": 618.1564331054688 }, { "x": 236.6608123779297, "y": 618.1564331054688 }, { "x": 236.3086395263672, "y": 618.1564331054688 }, { "x": 235.99563598632812, "y": 618.1564331054688 }, { "x": 235.68954467773438, "y": 618.1564331054688 }]
进行绘制:
import { App, Line, Path } from 'leafer-ui'
import '@leafer-in/editor' // 图形编辑插件
// 导入龙的路径部件 及 之前采集的飞行路径
import { points, headPath, bodyPath, clawLeftPath, clawRightPath, tailPath } from './dragon'
const app = new App({
view: window,
editor: {} // 会自动创建 editor实例、tree层、sky层
})
// 加载龙的飞行路径
const line = new Line({ points })
app.tree.add(line)
// 开始绘制龙
let fill = 'black' // 填充色
/// 1. 头
const head = new Path({
path: headPath,
fill,
around: 'center'
})
app.tree.add(head)
// 2. 爪子
const claws = [
new Path({ path: clawLeftPath, fill, around: 'center' }),
new Path({ path: clawRightPath, fill, around: 'center' }),
new Path({ path: clawLeftPath, fill, around: 'center' }),
new Path({ path: clawRightPath, fill, around: 'center' }),
]
app.tree.add(claws)
// 3. 身体,多个活动关节
const body: Path[] = []
for (let i = 0; i < 36; i++) {
let scale = 1
if (i < 10) scale -= (10 - i) / 30 // 靠近头部收窄
else if (i > 16) scale -= (i - 16) / 30 // 尾部收窄
body.push(new Path({ path: bodyPath, fill, scale, around: 'center' }))
}
app.tree.add(body)
// 4. 尾巴
const tail = new Path({ path: tailPath, fill, around: 'center' })
app.tree.add(tail)
- 点睛的交互功能,点击龙头加上龙眼,然后龙就活过来,开始按运动路径循环飞行。
import { App, Line, Platform, Path } from 'leafer-ui'
import '@leafer-in/editor' // 图形编辑插件
import '@leafer-in/motion-path' // 运动路径插件
import '@leafer-in/animate' // 动画插件
import '@leafer-in/state' // 按钮状态插件
// 导入龙的路径部件 及 之前采集的飞行路径
import { points, headPath, headWithEyePath, bodyPath, clawLeftPath, clawRightPath, tailPath } from './dragon'
const app = new App({
view: window,
editor: {} // 会自动创建 editor实例、tree层、sky层
})
// 加载龙的飞行路径
const line = new Line({ motionPath: true, points }) // 增加 motionPath: true, 设为运动路径
app.tree.add(line)
// --- 第一部分 ---
// 绘制龙
let fill = 'black' // 填充色
/// 1. 头
const head = new Path({
path: headPath,
fill,
around: 'center',
cursor: 'pointer', // 增加按钮交互效果
hoverStyle: { scale: 1.2 },
pressStyle: { scale: 3, transition: 0.5 }
})
app.tree.add(head)
// 2. 爪子
const claws = [
new Path({ path: clawLeftPath, fill, around: 'center' }),
new Path({ path: clawRightPath, fill, around: 'center' }),
new Path({ path: clawLeftPath, fill, around: 'center' }),
new Path({ path: clawRightPath, fill, around: 'center' }),
]
app.tree.add(claws)
// 3. 身体,多个活动关节
const body: Path[] = []
for (let i = 0; i < 36; i++) {
let scale = 1
if (i < 10) scale -= (10 - i) / 30 // 靠近头部收窄
else if (i > 16) scale -= (i - 16) / 30 // 尾部收窄
body.push(new Path({ path: bodyPath, fill, scale, around: 'center' }))
}
app.tree.add(body)
// 4. 尾巴
const tail = new Path({ path: tailPath, fill, around: 'center' })
app.tree.add(tail)
// --- 第二部分 ---
// 飞行动画及交互
// 1. 准备飞行数据
const total = line.getMotionTotal() // 飞行的总里程(运动路径的总长度)
let to = 700 // 飞往的位置(距离起点)
function getPosition(position: number): number {
return position < 0 ? total + position : position // 生成有效的定位位置
}
// 2. 飞行到指定位置,并定位龙的部件
function flyTo(to: number) {
let position = to
// 定位头部
head.set(line.getMotionPoint(position)) // 获取运动路径上的点,然后 set({x, y, rotation})
position -= 15
// 定位身体
body.forEach(item => {
item.set(line.getMotionPoint(getPosition(position)))
position -= 30 * item.scaleX * 0.75
})
// 定位尾巴
tail.set(line.getMotionPoint(getPosition(position)))
// 定位爪子
const quarter = (position - to) / 4 // 身体长度的 1/4
position = to + quarter
claws[0].set(line.getMotionPoint(getPosition(position)))
claws[1].set(line.getMotionPoint(getPosition(position += 20)))
position = to + quarter * 3
claws[2].set(line.getMotionPoint(getPosition(position)))
claws[3].set(line.getMotionPoint(getPosition(position += 20)))
}
// 3. 循环飞行动画
function animate() {
to += 8
if (to > total) to = 0
flyTo(to)
Platform.requestRender(animate)
}
// 4.点击头部之后开始飞行动画
head.on('tap', () => {
head.path = headWithEyePath // 替换带眼睛的龙头路径
setTimeout(() => {
animate()
}, 500)
})
// 设置龙的初始飞行状态
flyTo(to)
增强功能
可添加背景天空、云朵(支持编辑大小、进行动画),增强页面的氛围感。
可通过点击不同的【色块按钮】进行换色(龙头、龙身、龙尾)。
尽情发挥你的想象,创造出与众不同的游戏效果。
四、详细了解 LeaferJS
LeaferJS 提供了丰富的功能,可通过官网教程示例进一步学习。
官网教程主要分为六个主要部分:
入门教程:基础、进阶、常用插件、构成,方便快速入门。
元素组件:应用、组、图形、路径、图像、文字、自定义元素。
元素样式与功能: 布局、外观、交互、动画、数据、高级功能。
事件类型:交互、元素、平台事件。
类库: 数学、列表。
插件: 官网、社区插件。
为了聚焦主要知识,每篇文档只展示了关键属性方法,可通过点击 继承 或 归属 文档溯源。
重点关注功能
动画功能
可以通过文章了解 LeaferJS 能实现哪些动画、游戏效果。
功能入口: https://www.leaferjs.com/ui/guide/plugin/animate.html
图形编辑功能
功能入口:https://www.leaferjs.com/ui/plugin/in/editor/
快速参考
元素
App Leafer Frame Box Group UI Custom
Rect Ellipse Line Polygon Star
Path Pen Image SVG Canvas Text
事件
PointerEvent DragEvent DropEvent SwipeEvent
MoveEvent ZoomEvent RotateEvent