基于canvas Fabric.js库创建的vue Fabric组件，定制画板，图片关联较差.zip

<p align="center" id="e-b"> <img src="https://gitee.com/_pure/codes/dn4u2bw65zxemfklcao9i45/raw?blob_name=vue-fabric.png" > <p align="center"> <a href="https://opensource.org/licenses/artistic-license-2.0.php"> <img src="https://img.shields.io/github/license/programmeres/easy-poi.svg" > </a> <a href="#e-b"> <img src="https://img.shields.io/badge/coverage-100%25-red.svg" > </a> <a href="https://app.codacy.com/project/purestart/vue-fabric/dashboard"> <img src="https://api.codacy.com/project/badge/Grade/90ac9cd605fe47dc835f0d571973e150" > </a> <a href="https://gitee.com/_pure/vue-fabric#project-donate-overview"> <img src="https://img.shields.io/badge/donate-%EF%BF%A5-orange.svg" > </a> </p> </p> # vue-fabric purestart vue-fabric. <img src="https://gitee.com/_pure/codes/dn4u2bw65zxemfklcao9i45/raw?blob_name=fabric4.gif" > ## Installation ``` npm install vue-fabric --save ``` ## 依赖 下载[customiseControls.min.js](https://github.com/purestart/vue-fabric/blob/master/static/js/customiseControls.min.js).和 [fabric.min.js](https://github.com/purestart/vue-fabric/blob/master/static/js/fabric.min.js).到本地 static/js/文件下 本地项目 index.html 引入 ``` <script type="text/javascript" src="./static/js/fabric.min.js"></script> <script type="text/javascript" src="./static/js/customiseControls.min.js"></script> ``` ## Import ``` 在main.js中 import 'vue-fabric/dist/vue-fabric.min.css'; import { Fabric } from 'vue-fabric'; ``` ``` Vue.use(Fabric); ``` 使用 ``` <vue-fabric ref="canvas" :width="width" :height="height"></vue-fabric> ``` ## Usage #### Props | Name | Type | Default | Description | | ------ | ------ | ------- | ------------- | | id | String | "canvas"| id | | width | Number | 0 | canvas width | | height | Number | 0 | canvas height | ## Function > 方法调用 > this.\$refs.canvas.方法名(params) #### createImage(url,options) 绘制图片 | params | Type | Description | | ------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | | url | String | image url | | options | Object | id(唯一标识该元素，以下每个方法 options 参数都带 id),width,height,left,top,registeObjectEvent (Boolean 是否注册对象事件),evented 是否可被点击选中,selectable 是否禁止被选中...其它属性 | #### createImageByImg(img,options) 绘制图片 | params | Type | Description | | ------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | | img | Image对象 | new Image对象 | | options | Object | id(唯一标识该元素，以下每个方法 options 参数都带 id),width,height,left,top,registeObjectEvent (Boolean 是否注册对象事件),evented 是否可被点击选中,selectable 是否禁止被选中...其它属性 | #### createTextbox(text,options) 绘制文本 | params | Type | Description | | ------- | ------ | ------------------------------------------ | | text | String | text content | | options | Object | width,left,top,fill(颜色),fontSize,id,fontFamily,strokeWidth,stroke,textAlign,textBackgroundColor,lineHeight,fontWeight,...其它属性| #### createItext(text,options) 绘制可编辑文本(可换行显示文本) | params | Type | Description | | ------- | ------ | ------------------------------------------ | | text | String | text content | | options | Object | width,left,top,fill(颜色),fontSize,id,editable(是否可编辑),fontFamily,fontSize,strokeWidth,stroke,textAlign,textBackgroundColor,lineHeight,fontWeight,...其它属性| #### createRect(options) 绘制矩形 | options | Type | Description | | --------- | ------ | -------------- | | left | Number | left | | top | Number | top | | width | Number | Rect width | | height | Number | Rect height | | fillColor | String | Rect fillColor | | id | String | 唯一标识 id | | 其它属性兼容 | all | 兼容原生其它属性 | #### freeDrawConfig(options) 开启/关闭自由绘制（画笔） | options | Type | Description | | ------------- | ------- | --------------------------- | | isDrawingMode | Boolean | 是否开启自由绘制 true/false | | color | String | 绘制线颜色 | | drawWidth | Number | 绘制线宽 | #### eraseDrawConfig(options) 开启自由绘制橡皮擦(只对当前绘制画布有效) | options | Type | Description | | ------------- | ------- | --------------------------- | | color | String | 选填,擦除颜色默认白色 | | drawWidth | Number | 橡皮擦线宽 | #### createLine(options) 绘制直线 | options | Type | Description | | ----------- | ------ | ------------------------ | | x,y,x1,y1 | Number | line points,直线两点坐标 | | fillColor | String | fillColor 填充颜色 | | strokeColor | String | strokeColor 绘制颜色 | | 其它属性兼容 | all | 兼容原生其它属性 | #### drawDottedline(options) 绘制虚线 | options | Type | Description | | --------- | ------ | ----------------------------------------- | | x,y,x1,y1 | Number | line points,直线两点坐标 | | color | String | 绘制线颜色 | | drawWidth | Number | 绘制线宽 | | offset | Number | 默认 6，每隔 offset 个像素空 empty 个像素 | | empty | Number | 默认 3，每隔 offset 个像素空 empty 个像素 | | 其它属性兼容 | all | 兼容原生其它属性 | #### drawArrowLine(options) 绘制箭头直线 | options | Type | Description | | --------- | ------ | ------------------------ | | x,y,x1,y1 | Number | line points,直线两点坐标 | | color | String | 绘制线颜色 | | drawWidth | Number | 绘制线宽 | | fillColor | Number | 默认透明，填充颜色 | | theta | Number | 默认 35，箭头角度大小 | | headlen | Number | 默认 35，箭头角度大小 | | 其它属性兼容 | all | 兼容原生其它属性 | #### createTriangle(options) 绘制三角形 | options | Type | Description | | --------------- | ------ | ------------------- | | x,y,x1,y1,x2,y2 | Number | 三角形 3 点坐标位置 | | left,top | Number | position 位置 | | color | String | 绘制线颜色 | | fillColor | String | fillColor 填充颜色 | | drawWidth | Number | 绘制线宽 | | 其它属性兼容 | all | 兼容原生其它属性 | #### createEqualTriangle(options) 绘制等边三角形 | options | Type | Description | | -------- | ------ | ------------------ | | left,top | Number | position 位置 | | fill | String | fillColor 填充颜色 | | width | Number | 三角形底边宽度 | | height | Number | 三角形高 | | 其它属性兼容 | all | 兼容原生其它属性 | #### drawByPath(pathArray,options) 根据轨迹绘制图形 | params |