云墨UI

Appearance

ImageMark 图片标注(1.3.1) ​

TIP

ps: 该组件基于fabric.js实现，封装了基本的图标标注功能，如画线，画矩形，画圆形等等。

用于在图片上添加标注信息。

基础用法 ​

使用src属性来指定图片的地址，通过utils传入需要的标注工具。

<template>
    <div>
        <YmImageMark
            class="image-mark"
            :src="imageSrc"
            :utils="['dot','rect']"
        ></YmImageMark>
    </div>
</template>

<script setup>
import { YmImageMark } from 'guyan-ym-ui'

const imageSrc = 'https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg'
</script>

<style  scoped>
.image-mark {
    height: 600px;
}
</style>

数据导出 ​

可以使用exportData方法导出标注的数据，导出数据是一个数组，第一项为背景图。


[]

<template>
    <div>
        <YmImageMark
            class="image-mark"
            :src="imageSrc"
            ref="imageMarkRef"
        ></YmImageMark>
        <br />
        <ym-button type="primary" @click="exportData">导出标记数据</ym-button>
        <ym-button type="success" @click="imageMarkRef?.clear">清除标记数据</ym-button>
        <ym-button type="warning" @click="imageMarkRef?.hidden">隐藏标记数据</ym-button>
        <pre>{{ markData }}</pre>
    </div>
</template>

<script setup>
import { YmImageMark } from 'guyan-ym-ui'
import { ref, computed  } from 'vue'

const imageMarkRef = ref(null)

const imageSrc = 'https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg'


const data = ref([])
const markData = computed(() => {
    return data.value.map(item => {
        return {
            ...item,
            shape: null
        }
    })
})
const exportData = () => {
    data.value = imageMarkRef.value.exportData()
}



</script>

<style  scoped>
.image-mark {
    height: 600px;
}
</style>

ImageMark API ​

Props ​

属性名描述类型默认值
src图片地址string-
width图片宽度number-
utils绘图工具EditorType[]-
hidden是否隐藏绘图对象boolean-
clear是否显示清空画布按钮boolean-
shapes绘图对象列表ShapeObj[]-
reset是否显示恢复画布按钮boolean-
maxWidth画布最大宽度number-
maxHeight画布最大高度number-
modelValue画布对象数组FabricObject[]-

Events ​

事件名描述类型
mouse:down鼠标按下时触发(e: 'mouse:down', event: any) => void
mouse:move鼠标移动时触发(e: 'mouse:move', event: any) => void
mouse:up鼠标释放时触发(e: 'mouse:up', event: any) => void
object:moving对象移动时触发(e: 'object:moving') => void
object:modified对象修改时触发(e: 'object:modified') => void
object:scaling对象缩放时触发(e: 'object:scaling') => void
object:rotating对象旋转时触发(e: 'object:rotating') => void
selection:created选择创建时触发(e: 'selection:created') => void
selection:updated选择更新时触发(e: 'selection:updated') => void
selection:cleared选择清除时触发(e: 'selection:cleared') => void
hidden隐藏绘图对象时触发(e: 'hidden', value: boolean) => void
clear清空画布时触发(e: 'clear', value: boolean) => void
reset恢复画布时触发(e: 'reset', value: boolean) => void
update:modelValue更新画布对象数组时触发(e: 'update:modelValue', shapes: FabricObject[]) => void

Methods ​

属性/方法名描述类型
fabricObjFabric画布对象Canvas
shapeObjList绘图对象列表FabricObject[]
update更新绘图对象列表(shapes: ShapeObj[]) => void
clear清空画布() => void
hidden隐藏/显示绘图对象(value: boolean) => void
exportData导出标注数据() => void