{"id":21161534,"url":"https://github.com/mudin/vue-fabric","last_synced_at":"2025-07-09T14:31:40.734Z","repository":{"id":65519518,"uuid":"180563496","full_name":"mudin/vue-fabric","owner":"mudin","description":"Vuejs + Fabricjs ","archived":false,"fork":false,"pushed_at":"2019-05-23T23:01:10.000Z","size":1347,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-11-16T20:05:29.975Z","etag":null,"topics":["canvas","canvas2d","fabric","fabricjs","svg","transform","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mudin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-10T11:03:23.000Z","updated_at":"2024-01-14T23:33:37.000Z","dependencies_parsed_at":"2023-01-27T02:10:21.177Z","dependency_job_id":null,"html_url":"https://github.com/mudin/vue-fabric","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudin%2Fvue-fabric","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudin%2Fvue-fabric/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudin%2Fvue-fabric/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudin%2Fvue-fabric/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mudin","download_url":"https://codeload.github.com/mudin/vue-fabric/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225454432,"owners_count":17476822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas2d","fabric","fabricjs","svg","transform","vuejs"],"created_at":"2024-11-20T13:14:41.318Z","updated_at":"2024-11-20T13:14:41.881Z","avatar_url":"https://github.com/mudin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" id=\"e-b\"\u003e\n\u003cimg src=\"https://gitee.com/_pure/codes/dn4u2bw65zxemfklcao9i45/raw?blob_name=vue-fabric.png\" \u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"https://opensource.org/licenses/artistic-license-2.0.php\"\u003e\n            \u003cimg src=\"https://img.shields.io/github/license/programmeres/easy-poi.svg\" \u003e\n        \u003c/a\u003e\n        \u003ca href=\"#e-b\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/coverage-100%25-red.svg\" \u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://app.codacy.com/project/purestart/vue-fabric/dashboard\"\u003e\n            \u003cimg src=\"https://api.codacy.com/project/badge/Grade/90ac9cd605fe47dc835f0d571973e150\" \u003e\n        \u003c/a\u003e\n         \u003ca href=\"https://gitee.com/_pure/vue-fabric#project-donate-overview\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/donate-%EF%BF%A5-orange.svg\" \u003e\n        \u003c/a\u003e\n    \u003c/p\u003e    \n\u003c/p\u003e\n\n# VueFabric\n\nForked from purestart's ![vue-fabric](https://github.com/purestart/vue-fabric).\n\n\u003cimg src=\"https://gitee.com/_pure/codes/dn4u2bw65zxemfklcao9i45/raw?blob_name=fabric4.gif\" \u003e\n\n## Installation\n\n```\nnpm install vuejs-fabric --save\n```\n\n## Import\n\n```\nimport VueFabric from 'vuejs-fabric';\n```\n\n```\nVue.component('VueFabric',VueFabric);\n```\n\nusa\n\n```\n \u003cvue-fabric ref=\"canvas\" :width=\"width\" :height=\"height\"\u003e\u003c/vue-fabric\u003e\n```\n\n## Usage\n\n#### Props\n\n| Name   | Type   | Default | Description   |\n| ------ | ------ | ------- | ------------- |\n| width  | Number | 0       | canvas width  |\n| height | Number | 0       | canvas height |\n\n## Function\n\n\u003e Method call\n\u003e this.\\$refs.canvas.method(params)\n\n#### createImage(url,options) 绘制图片\n\n| params  | Type   | Description                                                                                                              |\n| ------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |\n| url     | String | image url                                                                                                                |\n| options | Object | id(DOM element ID),width,height,left,top,registeObjectEvent |\n\n#### createTextbox(text,options) 绘制文本\n\n| params  | Type   | Description                                |\n| ------- | ------ | ------------------------------------------ |\n| text    | String | text content                               |\n| options | Object | width,left,top,fillColor(shape),fontSize,id |\n\n#### createRect(options) 绘制矩形\n\n| options   | Type   | Description    |\n| --------- | ------ | -------------- |\n| left      | Number | left           |\n| top       | Number | top            |\n| width     | Number | Rect width     |\n| height    | Number | Rect height    |\n| fillColor | String | Rect fillColor |\n| id        | String | unique id    |\n\n#### freeDrawConfig(options) 开启/关闭自由绘制（画笔）\n\n| options       | Type    | Description                 |\n| ------------- | ------- | --------------------------- |\n| isDrawingMode | Boolean | Drawing true/false |\n| color         | String  | Draw line color                  |\n| drawWidth     | Number  | line width             |\n\n#### createLine(options) 绘制直线\n\n| options     | Type   | Description              |\n| ----------- | ------ | ------------------------ |\n| x,y,x1,y1   | Number | line points,直线两点坐标 |\n| fillColor   | String | fillColor 填充颜色       |\n| strokeColor | String | strokeColor 绘制颜色     |\n\n#### drawDottedline(options) 绘制虚线\n\n| options   | Type   | Description                               |\n| --------- | ------ | ----------------------------------------- |\n| x,y,x1,y1 | Number | line points,直线两点坐标                  |\n| color     | String | 绘制线颜色                                |\n| drawWidth | Number | 绘制线宽                                  |\n| offset    | Number | 默认 6，每隔 offset 个像素空 empty 个像素 |\n| empty     | Number | 默认 3，每隔 offset 个像素空 empty 个像素 |\n\n#### drawArrowLine(options) 绘制箭头直线\n\n| options   | Type   | Description              |\n| --------- | ------ | ------------------------ |\n| x,y,x1,y1 | Number | line points,直线两点坐标 |\n| color     | String | 绘制线颜色               |\n| drawWidth | Number | 绘制线宽                 |\n| fillColor | Number | 默认透明，填充颜色       |\n| theta     | Number | 默认 35，箭头角度大小    |\n| headlen   | Number | 默认 35，箭头角度大小    |\n\n#### createTriangle(options) 绘制三角形\n\n| options         | Type   | Description         |\n| --------------- | ------ | ------------------- |\n| x,y,x1,y1,x2,y2 | Number | 三角形 3 点坐标位置 |\n| left,top        | Number | position 位置       |\n| color           | String | 绘制线颜色          |\n| fillColor       | String | fillColor 填充颜色  |\n| drawWidth       | Number | 绘制线宽            |\n\n#### createEqualTriangle(options) 绘制等边三角形\n\n| options  | Type   | Description        |\n| -------- | ------ | ------------------ |\n| left,top | Number | position 位置      |\n| fill     | String | fillColor 填充颜色 |\n| width    | Number | 三角形底边宽度     |\n| height   | Number | 三角形高           |\n\n#### createCircle(options) 绘制圆\n\n| options  | Type   | Description        |\n| -------- | ------ | ------------------ |\n| left,top | Number | position 位置      |\n| fill     | String | fillColor 填充颜色 |\n| radius   | Number | 圆形半径           |\n\n#### createEllipse(options) 绘制椭圆\n\n| options     | Type   | Description                        |\n| ----------- | ------ | ---------------------------------- |\n| rx,ry       | Number | rx , ry 椭圆两个长轴尺寸和短轴尺寸 |\n| left,top    | Number | position 位置                      |\n| fillColor   | String | fillColor 填充颜色                 |\n| strokeColor | String | strokeColor 绘制线颜色             |\n| angle       | Number | angle 倾斜角度                     |\n\n#### setRotate(angle) 旋转选中元素\n\n| params | Type   | Description |\n| ------ | ------ | ----------- |\n| angle  | Number | 旋转角度    |\n\n#### setBackgroundImage(url) 设置画布背景图片\n\n| params | Type   | Description  |\n| ------ | ------ | ------------ |\n| url    | String | 背景图片 Url |\n\n#### renderAll() 重新渲染画布\n\n#### setBackgroundColor(color) 设置画布背景颜色\n\n| params | Type   | Description |\n| ------ | ------ | ----------- |\n| color  | String | 背景颜色    |\n\n#### toggleMirror(options) 设置图片元素镜像翻转\n\n| options | Type   | Description                         |\n| ------- | ------ | ----------------------------------- |\n| flip    | String | 可选值 X,Y 默认值 X , 镜像翻转 X，Y |\n\n#### setCornerIcons(options) 自定义旋转操作元素图片\n\n| options               | Type   | Description                                                   |\n| --------------------- | ------ | ------------------------------------------------------------- |\n| size                  | Npmber | 图片大小 px                                                   |\n| borderColor           | String | 图片边框颜色                                                  |\n| cornerBackgroundColor | String | 设置背景颜色                                                  |\n| cornerShape           | String | 形状，默认'rect' ，可选'rect', 'circle'                       |\n| tl                    | String | top left 左上角元素图片地址（本地只能 static 下的图片）       |\n| tr                    | String | top right 右上角元素图片地址（本地只能 static 下的图片）      |\n| bl                    | String | bottom left 左下角元素图片地址（本地只能 static 下的图片）    |\n| br                    | String | bottom right 右下角元素图片地址（本地只能 static 下的图片）   |\n| ml                    | String | middle left 中间左边元素图片地址（本地只能 static 下的图片）  |\n| mr                    | String | middle right 中间右边元素图片地址（本地只能 static 下的图片） |\n| mtr                   | String | middle top 顶部元素图片地址（本地只能 static 下的图片）       |\n\n#### toNextLayer() 设置当前选中画布到下一层\n\n#### toLastLayer() 设置当前选中画布到上一层\n\n#### toBottomLayer() 设置当前选中画布到底层\n\n#### toTopLayer() 设置当前选中画布到顶层\n\n#### discardActive() 取消选中\n\n#### getObjects() 获取当前画布上的所有元素对象\n\n#### clear() 清除当前画布上的所有元素对象\n\n#### toDataUrl() 返回当前画布的 base64 图片\n\n#### toJson() 返回当前画布的 json 对象\n\n#### loadFromJSON(json,cb) 从 json 对象中加载画布数据\n\n| params | Type     | Description      |\n| ------ | -------- | ---------------- |\n| json   | Object   | json 对象        |\n| cb     | Function | 加载完成回调函数 |\n\n#### toSvg() 返回当前画布的 svg 图片\n\n#### removeCurrentObj() 删除当前选中对象\n\n#### getEditObj() 返回当前选中对象，并不在画布上显示，用于编辑当前元素\n\n#### setEditObj(obj) 设置添加对象到画布\n\n## 事件\n\n```\n \u003cvue-fabric ref=\"canvas\" @selection:created=\"selected\" :width=\"width\" :height=\"height\"\u003e\u003c/vue-fabric\u003e\n```\n\nMouse event\n\n| name           | Type  | Description    |\n| -------------- | ----- | -------------- |\n| mouse:down     | event | mouse down     |\n| mouse:up       | event | mouse up       |\n| mouse:move     | event | mouse move     |\n| mouse:dblclick | event | mouse dblclick |\n| mouse:over     | event | mouse over     |\n| mouse:out      | event | mouse out      |\n\nOther events\n\n| name                     | Type  | Description                                    |\n| ------------------------ | ----- | ---------------------------------------------- |\n| selection:created        | event | 选中 canvas 元素对象，单选和多选都会触发此事件 |\n| selection:updated        | event | selection updated                              |\n| selection:cleared        | event | selection cleared                              |\n| before:selection:cleared | event | before selection cleared                       |\n| object:added             | event | 当有元素被添加进来时候触发                     |\n| object:removed           | event | object removed                                 |\n| object:modified          | event | object modified                                |\n| object:rotating          | event | object rotating                                |\n| object:scaling           | event | object scaling                                 |\n| object:moving            | event | object moving                                  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudin%2Fvue-fabric","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmudin%2Fvue-fabric","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudin%2Fvue-fabric/lists"}