|
@@ -36,160 +36,160 @@
|
|
|
</template>
|
|
</template>
|
|
|
<script setup lang='ts'>
|
|
<script setup lang='ts'>
|
|
|
import { h, onMounted, ref } from 'vue'
|
|
import { h, onMounted, ref } from 'vue'
|
|
|
-import { DrawCanvas } from './js/draw.js'
|
|
|
|
|
|
|
+import { DrawCanvas } from './assets/js/draw'
|
|
|
|
|
|
|
|
const drawCanvas = new DrawCanvas()
|
|
const drawCanvas = new DrawCanvas()
|
|
|
const options = [
|
|
const options = [
|
|
|
{
|
|
{
|
|
|
label: '边界线',
|
|
label: '边界线',
|
|
|
- icon: './img/0.png',
|
|
|
|
|
|
|
+ icon: './assets/img/0.png',
|
|
|
value: 0,
|
|
value: 0,
|
|
|
w: 5,
|
|
w: 5,
|
|
|
h: 3
|
|
h: 3
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '灰岩',
|
|
label: '灰岩',
|
|
|
- icon: './img/1.png',
|
|
|
|
|
|
|
+ icon: './assets/img/1.png',
|
|
|
value: 1,
|
|
value: 1,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '第四系全新统残坡积',
|
|
label: '第四系全新统残坡积',
|
|
|
- icon: './img/2.png',
|
|
|
|
|
|
|
+ icon: './assets/img/2.png',
|
|
|
value: 2,
|
|
value: 2,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '第四系全新统崩坡积',
|
|
label: '第四系全新统崩坡积',
|
|
|
- icon: './img/3.png',
|
|
|
|
|
|
|
+ icon: './assets/img/3.png',
|
|
|
value: 3,
|
|
value: 3,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '震旦系上统灯影组',
|
|
label: '震旦系上统灯影组',
|
|
|
- icon: './img/4.png',
|
|
|
|
|
|
|
+ icon: './assets/img/4.png',
|
|
|
value: 4,
|
|
value: 4,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '志留系中统石门坎组',
|
|
label: '志留系中统石门坎组',
|
|
|
- icon: './img/5.png',
|
|
|
|
|
|
|
+ icon: './assets/img/5.png',
|
|
|
value: 5,
|
|
value: 5,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '寒武系中统西王庙组',
|
|
label: '寒武系中统西王庙组',
|
|
|
- icon: './img/6.png',
|
|
|
|
|
|
|
+ icon: './assets/img/6.png',
|
|
|
value: 6,
|
|
value: 6,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '粉砂岩',
|
|
label: '粉砂岩',
|
|
|
- icon: './img/7.png',
|
|
|
|
|
|
|
+ icon: './assets/img/7.png',
|
|
|
value: 7,
|
|
value: 7,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '页岩',
|
|
label: '页岩',
|
|
|
- icon: './img/8.png',
|
|
|
|
|
|
|
+ icon: './assets/img/8.png',
|
|
|
value: 8,
|
|
value: 8,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '粉砂质泥岩',
|
|
label: '粉砂质泥岩',
|
|
|
- icon: './img/9.png',
|
|
|
|
|
|
|
+ icon: './assets/img/9.png',
|
|
|
value: 9,
|
|
value: 9,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '泥岩',
|
|
label: '泥岩',
|
|
|
- icon: './img/10.png',
|
|
|
|
|
|
|
+ icon: './assets/img/10.png',
|
|
|
value: 10,
|
|
value: 10,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '断层破碎带',
|
|
label: '断层破碎带',
|
|
|
- icon: './img/11.png',
|
|
|
|
|
|
|
+ icon: './assets/img/11.png',
|
|
|
value: 11,
|
|
value: 11,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '块石土',
|
|
label: '块石土',
|
|
|
- icon: './img/12.png',
|
|
|
|
|
|
|
+ icon: './assets/img/12.png',
|
|
|
value: 12,
|
|
value: 12,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '白云质灰岩',
|
|
label: '白云质灰岩',
|
|
|
- icon: './img/13.png',
|
|
|
|
|
|
|
+ icon: './assets/img/13.png',
|
|
|
value: 13,
|
|
value: 13,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '炭质页岩',
|
|
label: '炭质页岩',
|
|
|
- icon: './img/14.png',
|
|
|
|
|
|
|
+ icon: './assets/img/14.png',
|
|
|
value: 14,
|
|
value: 14,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '推测地层界线',
|
|
label: '推测地层界线',
|
|
|
- icon: './img/15.png',
|
|
|
|
|
|
|
+ icon: './assets/img/15.png',
|
|
|
value: 15,
|
|
value: 15,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '推测岩,土层界线',
|
|
label: '推测岩,土层界线',
|
|
|
- icon: './img/16.png',
|
|
|
|
|
|
|
+ icon: './assets/img/16.png',
|
|
|
value: 16,
|
|
value: 16,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '细砂岩',
|
|
label: '细砂岩',
|
|
|
- icon: './img/17.png',
|
|
|
|
|
|
|
+ icon: './assets/img/17.png',
|
|
|
value: 17,
|
|
value: 17,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '花岗闪长岩',
|
|
label: '花岗闪长岩',
|
|
|
- icon: './img/18.png',
|
|
|
|
|
|
|
+ icon: './assets/img/18.png',
|
|
|
value: 18,
|
|
value: 18,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '千枚岩',
|
|
label: '千枚岩',
|
|
|
- icon: './img/19.png',
|
|
|
|
|
|
|
+ icon: './assets/img/19.png',
|
|
|
value: 19,
|
|
value: 19,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '钙质千枚岩',
|
|
label: '钙质千枚岩',
|
|
|
- icon: './img/20.png',
|
|
|
|
|
|
|
+ icon: './assets/img/20.png',
|
|
|
value: 20,
|
|
value: 20,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '碳质板岩',
|
|
label: '碳质板岩',
|
|
|
- icon: './img/21.png',
|
|
|
|
|
|
|
+ icon: './assets/img/21.png',
|
|
|
value: 21,
|
|
value: 21,
|
|
|
w: 10,
|
|
w: 10,
|
|
|
h: 6
|
|
h: 6
|
|
@@ -231,7 +231,7 @@ function changeOption(v: null, option: { label: string; icon: string; value: num
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- document.title = 'canvas 画图'
|
|
|
|
|
|
|
+ document.title = 'H5 canvas画图'
|
|
|
const canvas = document.getElementById('CANVAS')
|
|
const canvas = document.getElementById('CANVAS')
|
|
|
drawCanvas._init({
|
|
drawCanvas._init({
|
|
|
canvas,
|
|
canvas,
|
|
@@ -275,4 +275,4 @@ onMounted(() => {
|
|
|
outline: none;
|
|
outline: none;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>./assets/js/draw.js
|