阅卷打分批改组件 paper-of-painter

安装

yarn add http://git.fastoa.co/sharebravery/paper-of-painter.git

if use pnpm

no installed pnpm and you can

yarn global add pnpm

install packages

pnpm add ch2-paper-of-painter

if use yarn

yarn add ch2-paper-of-painter

本地开发

本项目运行 yarn link

使用项目运行 yarn link paper-of-painter

打包安装

open

"declaration": true,
"declarationDir": "./lib/types",

$ yarn build

$ 使用的项目： yarn add http://git.fastoa.co/sharebravery/paper-of-painter.git

$ close type

更新依赖包

$ yarn upgrade-interactive --latest

use ch2-paper-of-painter

import component and style

<script lang="ts" setup>
    import { Ch2PaperOfPainter } from 'ch2-paper-of-painter';
    import 'ch2-paper-of-painter/lib/style.css';
</script>

<template>
    <Ch2PaperOfPainter style="width: 800px; height: 700px" />
</template>

use config

<script lang="ts" setup>
    import { Ch2PaperOfPainter } from 'ch2-paper-of-painter';
    import 'ch2-paper-of-painter/lib/style.css';
    import { DesignData ,IOptions,Brush} from 'ch2-paper-of-painter/lib/types/packages/PaperOfPainter/type'; // 注意这是类型文件的路径
    // 导入图片 import tickImg from "./assets/tick.svg";


    const designData = ref<DesignData>([]) // 使用v-model:designData或者@update:designData 用一个就够了

    const options:IOptions = {
        scale: 0.9 ,
        bgImgUrl:
      "http://imgupload3.youboy.com/imagestore20150819dfffeaad-52f8-41bd-b49b-93ee57b5c966.jpg",
            };

    function update(designData:DesignData){
        console.log(designData)
    }

</script>

<template>
    <Ch2PaperOfPainter style="width: 800px; height: 700px" @update:designData="update" :options="options"  />
<!-- <Ch2PaperOfPainter style="width: 800px; height: 700px" v-model:designData="designData" :options="options" /> -->

</template>

ch2-paper-of-painter props

| Property | Description | Type | Default | | ---------- | ------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | designData | 可选 可以双向绑定拿到数据(或者通过 update 事件拿到数据) | DesignData | [ ] | | brush | 笔刷 | Brush | {color: "red", size: 3, mode: "draw"} | | options | 配置项 | IOptions | {scale: 1, offset: 10, bgImgUrl:"http://imgupload3.youboy.com/imagestore20150819dfffeaad-52f8-41bd-b49b-93ee57b5c966.jpg", ...new Config(),} |

events

| Events Name | Description | Arguments | | ----------------- | ------------------ | ------------------------------------------------------- | | actionChange | 操作改变 | function(action:ToolType, designData:DesignData) | | toolChange | 工具改变 | function(tool:ToolType, designData:DesignData) | | update:designData | 数据改变 | function(designData:DesignData,currentData:PaintDesign) | | rePainting | 重绘 通过 ref 调用 | |