canvas绘制正弦函数曲线

package.json

@@ -17,6 +17,7 @@
     "ag-grid-vue3": "^28.0.0",
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
+    "decimal.js": "^10.4.2",
     "echarts": "^5.3.2",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",

src/modules/page6/IndexPage.vue

@@ -11,7 +11,8 @@ export default {
 // import CanvasStaticRoute from './element/CanvasStaticRoute.vue';
 // import MorphBox from './element/MorphBox.vue';
 // import CarouselWarp from './element/CarouselWarp.vue';
-import DataResponsive from './element/DataResponsive.vue';
+// import DataResponsive from './element/DataResponsive.vue';
+import CanvasStudy from './element/CanvasStudy.vue';
 </script>
 <template>
   <div class="page6 container-height">
@@ -19,7 +20,8 @@ import DataResponsive from './element/DataResponsive.vue';
     <!-- <canvas-static-route /> -->
     <!-- <morph-box /> -->
     <!-- <carousel-warp /> -->
-    <data-responsive />
+    <!-- <data-responsive /> -->
+    <canvas-study />
   </div>
 </template>
 

src/modules/page6/config.ts

@@ -447,3 +447,71 @@ export const WarpTestData3 = [
     },
   },
 ];
+
+// 权限扁平化数据结构
+export const AUTHS = [
+  {
+    id: 1,
+    title: '客户协议管理/客户制板协议管理/查看',
+    name: 'customer_agreement_mgt/cam_pcb/read',
+    i18n: {
+      'zh-CN': '客户协议管理/客户制板协议管理/查看',
+    },
+  },
+  {
+    id: 2,
+    title: '客户协议管理/客户制板协议管理/新建',
+    name: 'customer_agreement_mgt/cam_pcb/create',
+    i18n: {
+      'zh-CN': '客户协议管理/客户制板协议管理/新建',
+    },
+  },
+  {
+    id: 3,
+    title: '客户协议管理/客户制板协议管理/编辑',
+    name: 'customer_agreement_mgt/cam_pcb/edit',
+    i18n: {
+      'zh-CN': '客户协议管理/客户制板协议管理/编辑',
+    },
+  },
+  {
+    id: 4,
+    name: 'sys/user/read',
+    title: 'System/User Mgt/Read',
+    i18n: {
+      'en-US': 'System/User Mgt/Read',
+      'zh-CN': '系统设置/用户管理/查看',
+      'zh-TW': '系統設置/用戶管理/查看',
+    },
+  },
+  {
+    id: 5,
+    name: 'sys/user/create',
+    title: 'System/User Mgt/Create',
+    i18n: {
+      'en-US': 'System/User Mgt/Create',
+      'zh-CN': '系统设置/用户管理/新建',
+      'zh-TW': '系統設置/用戶管理/新建',
+    },
+  },
+  {
+    id: 6,
+    title: '系统设置/角色管理/查看',
+    name: 'sys/role/read',
+    i18n: {
+      'en-US': 'System/Role Mgt/Read',
+      'zh-CN': '系统设置/角色管理/查看',
+      'zh-TW': '系統設置/角色管理/查看',
+    },
+  },
+  {
+    id: 7,
+    title: '系统设置/角色管理/新建',
+    name: 'sys/role/create',
+    i18n: {
+      'en-US': 'System/Role Mgt/Create',
+      'zh-CN': '系统设置/角色管理/新建',
+      'zh-TW': '系統設置/角色管理/新建',
+    },
+  },
+];

src/modules/page6/element/CanvasStudy.vue

+<!--
+ * canvas学习
+  -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const transX = ref(-900);
+const transY = ref(0);
+onMounted(() => {
+  let canvas: any = document.getElementById('canvas');
+  let pen = canvas.getContext('2d');
+
+  let canvas2: any = document.getElementById('canvas2');
+  let pen2 = canvas2.getContext('2d');
+
+  pen2.save();
+  pen2.beginPath();
+  pen2.beginPath();
+  // drawGrid('green', 1200, 600, pen2);
+  pen2.restore();
+
+  // const width = 600; // canvas宽
+  // const angle = 30; // 角度值
+  // const arc = (angle * Math.PI) / 180; // 弧度值
+  // 中心点坐标
+  // const center = {
+  //   x: 300,
+  //   y: 300,
+  // };
+
+  // 绘制网格
+  function drawGrid(color: string, w: number, h: number, pen: any) {
+    const step = 100;
+    const w_l = w / step;
+    const h_l = h / step;
+
+    // 横着的线
+    for (let i = 0; i <= h_l; i++) {
+      pen.beginPath();
+      pen.strokeStyle = color;
+      pen.moveTo(0, i * step);
+      pen.lineTo(w, i * step);
+      pen.stroke();
+    }
+    // 竖着的线
+    for (let i = 0; i <= w_l; i++) {
+      pen.beginPath();
+      pen.moveTo(i * step, 0);
+      pen.lineTo(i * step, h);
+      pen.stroke();
+    }
+  }
+  pen.save();
+  drawGrid('#ca3e47', 1200, 600, pen);
+  pen.restore();
+
+  // 正弦曲线
+  // 圆心坐标
+  const center = {
+    x: 100,
+    y: 300,
+  };
+  const r = 100; // 半径
+  pen.save();
+  pen.beginPath();
+  pen.arc(center.x, center.y, r, 0, 2 * Math.PI);
+  pen.strokeStyle = '#ffb549';
+  pen.stroke();
+  // 指示线
+  pen.beginPath();
+  pen.moveTo(center.x, center.y);
+  pen.lineTo(2 * r, center.y);
+  pen.lineWidth = 2;
+  pen.stroke();
+  pen.restore();
+
+  // 画圆弧
+  function drawArc(arc: number) {
+    pen.save();
+    pen.beginPath();
+    const a_side1 = Math.sin(arc) * r;
+    const b_side1 = Math.cos(arc) * r;
+    const x1 = center.x + b_side1;
+    const y1 = center.y + a_side1;
+    const abs_step = 2 * r - x1;
+    pen.restore();
+
+    pen.save();
+    pen.beginPath();
+    pen.moveTo(x1, y1);
+    pen.lineTo(300 + abs_step, y1);
+    pen.strokeStyle = 'blue';
+    pen.stroke();
+    pen.restore();
+
+    // 正弦点
+    pen2.beginPath();
+    pen2.arc(300 - transX.value, y1, 10, 0, 2 * Math.PI);
+    pen2.stroke();
+
+    // 移动
+    transX.value += 10;
+
+    // 能够显示的区域长度
+    const zoneLenth = 200;
+    // (0-900)是初始的transX.value
+    const sideP = 0 - 900 + zoneLenth;
+    if (transX.value > sideP) {
+      const lens1 = transX.value - sideP;
+      // 1200是pen2画布的宽度
+      const clearX = 1200 - lens1;
+      // 600是pen2画布的高度
+      pen2.clearRect(clearX, 0, lens1, 600);
+    }
+
+    return {
+      x: x1,
+      y: y1,
+    };
+  }
+
+  // let i = 24;
+  // setInterval(() => {
+  //   if (i < 0) {
+  //     i = 23;
+  //   }
+  //   drawArc((i * 15 * Math.PI) / 180);
+  //   i--;
+  //   if (transX.value > 300) {
+  //     transX.value = 0;
+  //     pen2.clearRect(0, 0, 1200, 600);
+  //   }
+  // }, 1000);
+
+  drawArc((360 * Math.PI) / 180);
+  drawArc((345 * Math.PI) / 180);
+  drawArc((330 * Math.PI) / 180);
+  drawArc((315 * Math.PI) / 180);
+  // drawArc((300 * Math.PI) / 180);
+  // drawArc((285 * Math.PI) / 180);
+  // drawArc((270 * Math.PI) / 180);
+  // drawArc((255 * Math.PI) / 180);
+  // drawArc((240 * Math.PI) / 180);
+  // drawArc((225 * Math.PI) / 180);
+  // drawArc((210 * Math.PI) / 180);
+  // drawArc((195 * Math.PI) / 180);
+  // drawArc((180 * Math.PI) / 180);
+  // drawArc((165 * Math.PI) / 180);
+  // drawArc((150 * Math.PI) / 180);
+  // drawArc((135 * Math.PI) / 180);
+  // drawArc((120 * Math.PI) / 180);
+  // drawArc((105 * Math.PI) / 180);
+  // drawArc((90 * Math.PI) / 180);
+  // drawArc((75 * Math.PI) / 180);
+  // drawArc((60 * Math.PI) / 180);
+  // drawArc((45 * Math.PI) / 180);
+  // drawArc((30 * Math.PI) / 180);
+  // drawArc((15 * Math.PI) / 180);
+  // drawArc((0 * Math.PI) / 180);
+
+  // drawArc((345 * Math.PI) / 180);
+  // drawArc((330 * Math.PI) / 180);
+  // drawArc((315 * Math.PI) / 180);
+  // drawArc((300 * Math.PI) / 180);
+  // drawArc((285 * Math.PI) / 180);
+});
+</script>
+<template>
+  <div class="fit">
+    <div>canvas</div>
+
+    <div class="relative-position">
+      <canvas
+        id="canvas"
+        width="1200"
+        height="600"
+        style="border: 1px solid red; position: absolute; top: 0; left: 0"
+      ></canvas>
+      <canvas
+        id="canvas2"
+        width="1200"
+        height="600"
+        :style="{
+          border: '1px solid green',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translate(${transX}px, ${transY}px)`,
+        }"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  transform: translate(100px, 100px);
+}
+</style>

src/modules/page6/element/DataResponsive.vue

@@ -4,6 +4,7 @@
 <script setup lang="ts">
 import { ref, unref, reactive, toRaw } from 'vue';
 import { useMessage } from 'src/common/hooks';
+import { AUTHS } from '../config';
 
 const { info } = useMessage();
 
@@ -12,6 +13,7 @@ const refObj = ref({
   name: '张三',
   age: 18,
 });
+const showTree = ref(false);
 const state = reactive({
   name: '李四',
   age: 49,
@@ -19,6 +21,8 @@ const state = reactive({
     name: '李白',
     age: 111,
   },
+  nodes: [] as any,
+  ticked: [] as any,
 });
 
 function onView1() {
@@ -107,6 +111,101 @@ function onViewEffect() {
   console.log(res1);
   console.log(res2);
 }
+
+function onHandleMap() {
+  const myMap = new Map();
+  let data = [
+    { name: 'fruits', subclass: ['苹果'] },
+    { name: 'fruits', subclass: ['香蕉'] },
+    { name: 'vegetable', subclass: ['西蓝花'] },
+    { name: 'vegetable', subclass: ['芹菜'] },
+    { name: 'vegetable', subclass: ['菠菜'] },
+    { name: 'meat', subclass: ['猪肉'] },
+  ];
+  data.map((item: any) => {
+    const key = item.name;
+    let value = [];
+    if (myMap.has(key)) {
+      value = myMap.get(key);
+    }
+    value.push(item);
+    myMap.set(key, value);
+  });
+
+  let arr = [];
+  for (const [key, value] of myMap) {
+    arr.push({
+      name: key,
+      children: value,
+    });
+  }
+  console.log('myMap >>>>', myMap);
+  console.log(arr);
+}
+
+function onClickHandleAuth() {
+  let res = onHandleAuth(AUTHS, 0);
+  res.map((item: any) => {
+    let children_res = onHandleAuth(item.children, 1);
+    item.children = children_res;
+
+    item.children.map((el: any) => {
+      el.children = onHandleAuth(el.children, 2);
+    });
+  });
+  console.log('结果 =', res);
+  state.nodes = res;
+  // showTree.value = !showTree.value;
+  showTree.value = true;
+}
+
+function onHandleAuth(data: any, index: number) {
+  const lang = 'zh-CN';
+  let myMap = new Map();
+  data.map((item: any) => {
+    item[`title_${index}`] = item.i18n[lang].split('/')[index];
+    const nameList = item.name.split('/');
+    const maxLevel = nameList.length;
+    const currentName = nameList[index];
+    const lastName = item[`name_${index - 1}`];
+    if (lastName) {
+      item[`name_${index}`] = `${lastName}/${currentName}`;
+    } else {
+      item[`name_${index}`] = currentName;
+    }
+    const key = item[`name_${index}`];
+
+    let value = {
+      id: item.id,
+      title: item[`title_${index}`],
+      name: key,
+      children: [] as any,
+    };
+    if (myMap.has(key)) {
+      let child = myMap.get(key).children;
+      if (index + 1 < maxLevel) {
+        child.push(item);
+      }
+      value.children = child;
+    } else if (index + 1 < maxLevel) {
+      value.children.push(item);
+    }
+    myMap.set(key, value);
+  });
+
+  let arr = [];
+  for (const value of myMap.values()) {
+    arr.push(value);
+  }
+  // console.log('data >>>>', data);
+  // console.log('myMap >>>>', myMap);
+  // console.log('arr >>>>', arr);
+  return arr;
+}
+
+function onTicked() {
+  console.log('查看勾选的节点 >>>>', state.ticked);
+}
 </script>
 <template>
   <div class="fit">
@@ -164,6 +263,37 @@ function onViewEffect() {
         </q-card-section>
       </q-card>
     </div>
+
+    <div class="q-mb-md">
+      <q-card>
+        <q-card-section>
+          <div>
+            <q-btn
+              label="扁平化数据结构转tree"
+              color="primary"
+              @click="onHandleMap"
+            />
+            <q-btn
+              label="权限扁平化数据结构转tree"
+              color="primary"
+              @click="onClickHandleAuth"
+            />
+            <q-btn label="查看勾选的节点" color="primary" @click="onTicked" />
+          </div>
+          <div>
+            <q-tree
+              v-if="showTree"
+              :nodes="state.nodes"
+              node-key="name"
+              label-key="title"
+              tick-strategy="leaf"
+              default-expand-all
+              v-model:ticked="state.ticked"
+            />
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
   </div>
 </template>
 

yarn.lock

@@ -2590,6 +2590,11 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
+decimal.js@^10.4.2:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
+  integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"