@@ -23,7 +23,6 @@ | |||||
"dayjs": "^1.11.8", | "dayjs": "^1.11.8", | ||||
"echarts": "^5.2.2", | "echarts": "^5.2.2", | ||||
"element-plus": "^2.3.1", | "element-plus": "^2.3.1", | ||||
"fabric": "^5.3.0", | |||||
"js-audio-recorder": "^1.0.7", | "js-audio-recorder": "^1.0.7", | ||||
"nprogress": "^0.2.0", | "nprogress": "^0.2.0", | ||||
"path-browserify": "^1.0.1", | "path-browserify": "^1.0.1", | ||||
@@ -2,6 +2,7 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
@@ -24,7 +24,6 @@ declare module '@vue/runtime-core' { | |||||
ElInput: typeof import('element-plus/es')['ElInput'] | ElInput: typeof import('element-plus/es')['ElInput'] | ||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | ||||
ElOption: typeof import('element-plus/es')['ElOption'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
ElPagination: typeof import('element-plus/es')['ElPagination'] | |||||
ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ||||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ||||
@@ -32,14 +31,8 @@ declare module '@vue/runtime-core' { | |||||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | |||||
IEpDelete: typeof import('~icons/ep/delete')['default'] | |||||
IEpDownload: typeof import('~icons/ep/download')['default'] | |||||
IEpEdit: typeof import('~icons/ep/edit')['default'] | IEpEdit: typeof import('~icons/ep/edit')['default'] | ||||
IEpLoading: typeof import('~icons/ep/loading')['default'] | |||||
IEpMenu: typeof import('~icons/ep/menu')['default'] | IEpMenu: typeof import('~icons/ep/menu')['default'] | ||||
IEpSearch: typeof import('~icons/ep/search')['default'] | |||||
IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | |||||
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | ||||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | ||||
MyLoading: typeof import('./../components/myLoading.vue')['default'] | MyLoading: typeof import('./../components/myLoading.vue')['default'] | ||||
@@ -28,26 +28,26 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { fabric } from "fabric"; | |||||
// import { fabric } from "fabric"; | |||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
//#region 画布交互 | //#region 画布交互 | ||||
let canvas = new fabric.Canvas("canvas"); | |||||
// let canvas = new fabric.Canvas("canvas"); | |||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
onMounted(() => { | onMounted(() => { | ||||
let canvas = new fabric.Canvas("canvas"); | |||||
// let canvas = new fabric.Canvas("canvas"); | |||||
let imgElement = document.getElementById("bjImg"); //声明我们的图片 | let imgElement = document.getElementById("bjImg"); //声明我们的图片 | ||||
let imgInstance = new fabric.Image(imgElement, { | |||||
//设置图片位置和样子 | |||||
// left: 100, | |||||
// top: 100, | |||||
// width: 400, | |||||
// height: 200, | |||||
// angle: 30, //设置图形顺时针旋转角度 | |||||
}); | |||||
// let imgInstance = new fabric.Image(imgElement, { | |||||
//设置图片位置和样子 | |||||
// left: 100, | |||||
// top: 100, | |||||
// width: 400, | |||||
// height: 200, | |||||
// angle: 30, //设置图形顺时针旋转角度 | |||||
// }); | |||||
console.log(imgInstance); | console.log(imgInstance); | ||||
canvas.add(imgInstance); | canvas.add(imgInstance); | ||||
// canvas.on("mouse:up", function (options) { | // canvas.on("mouse:up", function (options) { | ||||