Skip to content

V
vue3-quasar-ts-study01
Commit 332e1ad4 authored by hucy's avatar hucy ☘
Browse files
Options

canvas绘制正弦函数曲线

parent df0d23cf
Show whitespace changes
Inline Side-by-side
Showing with 407 additions and 2 deletions
package.json
View file @ 332e1ad4
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"ag-grid-vue3": "^28.0.0", "ag-grid-vue3": "^28.0.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"decimal.js": "^10.4.2",
"echarts": "^5.3.2", "echarts": "^5.3.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.0",
......
src/modules/page6/IndexPage.vue
View file @ 332e1ad4
...@@ -11,7 +11,8 @@ export default { ...@@ -11,7 +11,8 @@ export default {
// import CanvasStaticRoute from './element/CanvasStaticRoute.vue'; // import CanvasStaticRoute from './element/CanvasStaticRoute.vue';
// import MorphBox from './element/MorphBox.vue'; // import MorphBox from './element/MorphBox.vue';
// import CarouselWarp from './element/CarouselWarp.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> </script>
<template> <template>
<div class="page6 container-height"> <div class="page6 container-height">
...@@ -19,7 +20,8 @@ import DataResponsive from './element/DataResponsive.vue'; ...@@ -19,7 +20,8 @@ import DataResponsive from './element/DataResponsive.vue';
<!-- <canvas-static-route /> --> <!-- <canvas-static-route /> -->
<!-- <morph-box /> --> <!-- <morph-box /> -->
<!-- <carousel-warp /> --> <!-- <carousel-warp /> -->
<data-responsive /> <!-- <data-responsive /> -->
<canvas-study />
</div> </div>
</template> </template>
......
src/modules/page6/config.ts
View file @ 332e1ad4
...@@ -447,3 +447,71 @@ export const WarpTestData3 = [ ...@@ -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 0 → 100644
View file @ 332e1ad4
<!--
* 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
View file @ 332e1ad4
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, unref, reactive, toRaw } from 'vue'; import { ref, unref, reactive, toRaw } from 'vue';
import { useMessage } from 'src/common/hooks'; import { useMessage } from 'src/common/hooks';
import { AUTHS } from '../config';
const { info } = useMessage(); const { info } = useMessage();
...@@ -12,6 +13,7 @@ const refObj = ref({ ...@@ -12,6 +13,7 @@ const refObj = ref({
name: '张三', name: '张三',
age: 18, age: 18,
}); });
const showTree = ref(false);
const state = reactive({ const state = reactive({
name: '李四', name: '李四',
age: 49, age: 49,
...@@ -19,6 +21,8 @@ const state = reactive({ ...@@ -19,6 +21,8 @@ const state = reactive({
name: '李白', name: '李白',
age: 111, age: 111,
}, },
nodes: [] as any,
ticked: [] as any,
}); });
function onView1() { function onView1() {
...@@ -107,6 +111,101 @@ function onViewEffect() { ...@@ -107,6 +111,101 @@ function onViewEffect() {
console.log(res1); console.log(res1);
console.log(res2); 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> </script>
<template> <template>
<div class="fit"> <div class="fit">
...@@ -164,6 +263,37 @@ function onViewEffect() { ...@@ -164,6 +263,37 @@ function onViewEffect() {
</q-card-section> </q-card-section>
</q-card> </q-card>
</div> </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> </div>
</template> </template>
......
yarn.lock
View file @ 332e1ad4
...@@ -2590,6 +2590,11 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2: ...@@ -2590,6 +2590,11 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
dependencies: dependencies:
ms "2.1.2" 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: deep-is@^0.1.3:
version "0.1.4" version "0.1.4"
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment