使用此vue组件，您可以在每个页面中添加一个可绘制的画布

可绘画 (vue-paintable)

With this vue plugin and component you can add a paintable canvas through your page. All paintings are saved by default into localStorage.

使用此vue插件和组件，您可以通过页面添加可绘制的画布。 默认情况下，所有绘画都保存到localStorage中。

View Demo 查看演示 Download Source 下载源

如何使用？ (How to use?)

npm install vue-paintable

or

要么

yarn add vue-paintable

Inside your main (typically main.js)

在您的main内部(通常是main.js)

import Vue from 'vue';
import Paintable from 'vue-paintable';

Vue.use(Paintable, {
  // optional methods
  setItem(key, image) {
    localStorage.setItem(key, image);
  },
  // you also can use async
  getItem(key) {
    return localStorage.getItem(key);
  },
  removeItem(key) {
    localStorage.removeItem(key);
  }
});
//...

内部组件 (Inside your components)

<template>
  <paintable
    alwaysOnTop
    :active="isActive"
    :width="800"
    :height="800"
    :disableNavigation="disableNavigation"
    :hide="hidePaintable"
    :horizontalNavigation="true"
    :navigation="navigation"
    :name="isFirstPaintable ? 'my-screen' : 'my-second-screen'"
    :factor="1"
    :lineWidth="dynamicLineWidth"
    :lineWidthEraser="20"
    :useEraser="useEraser"
    :color="color"
    class="paint"
    ref="paintable"
    @toggle-paintable="toggledPaintable"
  >
    Your content
    <router-view></router-view>
  </paintable>
</template>

导航 (Navigation)

Set your own navigation content by adding an object to your <paintable> component.

通过将对象添加到<paintable>组件来设置自己的导航内容。

{
  'draw-save': {
    body: 'draw',
    activeBody: '<strong>save</strong>'
  },
  color: {
    body: 'CP'
  }
}

Display navigation horizontal

显示水平导航

To display the navigation horizontally add horizontalNavigation to prop list.

要水平显示导航，请向道具列表添加horizontalNavigation 。

Available navigation items:

可用的导航项目：

• color

  颜色

• line-width

  行宽

• undo

  撤消

• redo

  重做

• delete

  删除

• cancel

  取消

has active state (activeBody):

具有活动状态(activeBody)：

• draw-save

  保存

• eraser-pencil

  橡皮铅笔

自定义导航 (Custom Navigation)

To use a custom navigation disable the default navigation with disableNavigation.

要使用自定义导航，请禁用默认导航与disableNavigation 。

使用$ refs调用可绘制的方法 (use $refs to call paintable methods)

<paintable ref="paintable">content</paintable>

<button @click="$refs.paintable.undoDrawingStep">undo</button>
<button @click="$refs.paintable.redoDrawingStep">redo</button>
<button @click="$refs.paintable.clearCanvas">clear</button>
<button @click="$refs.paintable.saveCurrentCanvasToStorage">
  save
</button>
<button @click="$refs.paintable.cancelDrawing">cancel</button>

Take a look at the demo (/src/App.vue)

看一下演示 ( /src/App.vue )

道具 (Props)

name	type	required	default	description
name	string - required	true	-	unique identifier
showUndoRedo	boolean	false	true	show undo and redo button
hide	boolean	false	false	hide the complete paintable
colors	Array of colors (rgb, hex etc.)	false	['black', '#f00', '#4481c7', 'rgba(255, 235, 59, 0.4)', '#999', 'green']	array of choosable colors
width	number	false	window.innerWidth	canvas width
height	number	false	window.innerHeight	canvas height
showLineWidth	boolean	false	true	show button to set line width
lineWidth	number	false	5	line width
alwaysOnTop	boolean	false	true	set canvas always as top layer
factor	number	false	1	set a scale factor if needed
lineWidthEraser	number	false	20	set eraser line width
horizontalNavigation	boolean	false	true	display the navigation horizontally or vertically
disableNavigation	boolean	false	false	hide navigation
active	boolean	false	false	set paintable active/inactive
color	string	false	#000	current color
useEraser	boolean	false	false	set to true, to use the eraser
threshold	number	false	0	set the threshold on which an event gets triggered (see events)

名称	类型	需要	默认	描述
名称	字符串-必填	真正	--	唯一标识符
showUndoRedo	布尔值	假	真正	显示撤消和重做按钮
隐藏	布尔值	假	假	隐藏完整的绘画
颜色	颜色数组(RGB，十六进制等)	假	[“黑色”，“＃f00”，“＃4481c7”，“ rgba(255、235、59、0.4)”，“＃999”，“绿色”]	可选颜色的数组
宽度	数	假	window.innerWidth	帆布宽度
高度	数	假	window.innerHeight	画布高度
showLineWidth	布尔值	假	真正	显示按钮以设置线宽
行宽	数	假	5	行宽
总在最前面	布尔值	假	真正	将画布始终设置为顶层
因子	数	假	1个	如果需要，设置比例因子
lineWidthEraser	数	假	20	设置橡皮擦线宽
水平导航	布尔值	假	真正	水平或垂直显示导航
disableNavigation	布尔值	假	假	隐藏导航
活性	布尔值	假	假	设置绘画活动/非活动
颜色	串	假	＃000	当前颜色
useEraser	布尔值	假	假	设置为true，以使用橡皮擦
阈	数	假	0	设置触发事件的阈值(请参阅事件)

大事记 (Events)

name	type	description
toggle-paintable	boolean	Is emitted, when changing paintable state
thresholdReached	boolean	Is emitted, when the speciefied threshold is reached

名称	类型	描述
可切换绘画	布尔值	更改可绘制状态时发射
达到阈值	布尔值	达到指定的阈值时发出

<paintable @toggle-paintable="toggledPaintable"></paintable>

<paintable :threshold="10" @thresholdReached="thresholdReached"></paintable>

发展 (development)

If you want to develop with this plugin, follow these steps:

如果要使用此插件进行开发，请遵循以下步骤：

• clone repo

  克隆回购

• run yarn install or npm install

  运行yarn install或npm install

• run yarn serve or npm run serve

  运行yarn serve或npm run serve

建立 (build)

You can find all built files inside the dist folder.

您可以在dist文件夹中找到所有构建的文件。

• run yarn build or npm run build

  运行yarn build或npm run build

翻译自: https://vuejsexamples.com/with-this-vue-component-you-can-add-a-paintable-canvas-through-every-page/