canvas 绘制动态路径箭头

CHANGELOG.md

+## 2022-11-14
+
+- canvas 绘制动态路径箭头
+
+## 2022-11-08
+
+- requestAnimationFrame 学习
+- promise 学习
+- canvas 绘制路径箭头

src/components/index.ts

@@ -4,6 +4,7 @@ import MyForm from './MyForm.vue';
 import MyTooltip from './MyTooltip.vue';
 import CanvasStaticRoute from './canvas-static-route/CanvasStaticRoute.vue';
 import ChartCarouselWarp from './chart-carousel-warp/ChartCarouselWarp.vue';
+import TitlePage from './title-page/TitlePage.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -12,6 +13,7 @@ export {
   MyTooltip as ComTooltip,
   CanvasStaticRoute as ComCanvasStaticRoute,
   ChartCarouselWarp as ComChartCarouselWarp,
+  TitlePage as ComTitlePage,
 };
 
 export default {
@@ -21,4 +23,5 @@ export default {
   MyTooltip,
   CanvasStaticRoute,
   ChartCarouselWarp,
+  TitlePage,
 };

src/components/title-page/TitlePage.vue

+<!--
+ * 通用标题栏
+  -->
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+});
+</script>
+<template>
+  <div class="com-title">{{ props.title }}</div>
+</template>
+
+<style lang="scss" scoped>
+.com-title {
+  width: 100%;
+  min-height: 50px;
+  padding: 0 5px;
+  color: #5e4f4c;
+  font-family: 'Gill Sans Extrabold', sans-serif;
+  box-sizing: border-box;
+  border-bottom: 4px solid #5e4f4c;
+  font-size: 20px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+</style>

src/modules/page6/IndexPage.vue

@@ -12,11 +12,14 @@ export default {
 // import MorphBox from './element/MorphBox.vue';
 // import CarouselWarp from './element/CarouselWarp.vue';
 // import DataResponsive from './element/DataResponsive.vue';
-// import CanvasStudy from './element/CanvasStudyCopy1.vue';
+// import CanvasStudy from './element/CanvasStudy.vue';
 // import CanvasStudy from './element/CanvasCurve.vue';
 
-import SubComponents from './element/AsyncAwait.vue';
+// import SubComponents from './element/AsyncAwait.vue';
+// import SubComponents from './element/RequestAnimationFrame.vue';
+
 // import SubComponents from './element/equipment/IndexPage.vue';
+import SubComponents from './element/canvas-router-map/CanvasRouterMap.vue'; // canvas 绘制动态路径
 </script>
 <template>
   <div class="page6 container-height">

src/modules/page6/element/CanvasCurve.vue

@@ -70,8 +70,10 @@ function draw(ctx: any, r: number, pen: any) {
   const centerY2 = center.y;
   ctx.beginPath();
   ctx.arc(centerX2, centerY2, 4, 0, Math.PI * 2);
-  ctx.strokeStyle = '#FC4422';
-  ctx.stroke();
+  ctx.fillStyle = '#78C0A8';
+  ctx.fill();
+  // ctx.strokeStyle = '#FC4422';
+  // ctx.stroke();
   ctx.restore();
 
   // 圆弧上点的坐标

src/modules/page6/element/RequestAnimationFrame.vue

+<!--
+ * RequestAnimationFrame 学习
+  -->
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  const element = document.getElementById(
+    'some-element-you-want-to-animate'
+  ) as HTMLElement;
+
+  let translateX = 0;
+
+  // 每秒执行30次，则执行1次需要的时间1/30(单位：秒)
+  function step() {
+    translateX++;
+    if (translateX > 30) {
+      return;
+    } else {
+      element.style.transform = 'translateX(' + translateX + 'px)';
+      element.innerText = String(translateX);
+      setTimeout(() => {
+        window.requestAnimationFrame(step);
+      }, (1 / 30) * 1000);
+    }
+  }
+
+  window.requestAnimationFrame(step);
+});
+</script>
+<template>
+  <div>
+    <div>RequestAnimationFrame</div>
+    <div id="some-element-you-want-to-animate"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#some-element-you-want-to-animate {
+  width: 200px;
+  height: 100px;
+  background-color: pink;
+}
+</style>

src/modules/page6/element/icons/car.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667983950515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2606" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 192c212.064 0 320 107.936 320 320s-107.936 320-320 320S192 724.064 192 512 299.936 192 512 192z m37.024 216.128a32 32 0 0 0 0 45.248l22.912 22.944h-184.288a32 32 0 1 0 0 64h187.52l-26.144 26.176a32 32 0 0 0 45.248 45.28l67.904-67.904a32 32 0 0 0 7.296-33.92 32 32 0 0 0-7.296-33.952l-67.904-67.872a32 32 0 0 0-45.248 0z" fill="#78C0A8" p-id="2607"></path><path d="M512 32C191.936 32 32 191.936 32 512c0 320.064 159.936 480 480 480 320.064 0 480-159.936 480-480C992 191.936 832.064 32 512 32z m0 64c284.736 0 416 131.264 416 416s-131.264 416-416 416S96 796.736 96 512 227.264 96 512 96z" fill="#78C0A8" fill-opacity=".148" p-id="2608"></path></svg>
\ No newline at end of file