Skip to content

Commit 6404a27

Browse files
purestartpurestart
committed
update drag image
1 parent 0d7a9a4 commit 6404a27

File tree

10 files changed

+755
-739
lines changed

10 files changed

+755
-739
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ npm install vue-fabric --save
1414

1515
本地项目 index.html 引入
1616

17+
```
1718
<script type="text/javascript" src="./static/js/fabric.min.js"></script>
1819
<script type="text/javascript" src="./static/js/customiseControls.min.js"></script>
20+
```
1921

2022
## Import
2123

‎dist/vue-fabric.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6-
<title>vue-fabric</title>
7-
<style>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7+
<title>vue-fabric</title>
8+
<style>
89
* {
910
margin: 0;
1011
padding: 0;
@@ -22,12 +23,14 @@
2223
height: 100%;
2324
}
2425
</style>
25-
</head>
26-
<body style="width:100%;height:100%">
27-
<div id="app"></div>
28-
<!-- built files will be auto injected -->
29-
<link rel="stylesheet" href="//at.alicdn.com/t/font_820468_seg2d163zpc.css">
30-
<script type="text/javascript" src="./static/js/fabric.js"></script>
31-
<script type="text/javascript" src="./static/js/customiseControls.js"></script>
32-
</body>
26+
</head>
27+
28+
<body style="width:100%;height:100%">
29+
<div id="app"></div>
30+
<!-- built files will be auto injected -->
31+
<link rel="stylesheet" href="//at.alicdn.com/t/font_820468_seg2d163zpc.css">
32+
<script type="text/javascript" src="./static/js/fabric.js"></script>
33+
<script type="text/javascript" src="./static/js/customiseControls.js"></script>
34+
</body>
35+
3336
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-fabric",
3-
"version": "0.1.12",
3+
"version": "0.1.15",
44
"author": "purestart <[email protected]>",
55
"description": "fabric vue components",
66
"keywords": [

‎static/images/dot-circle.png renamed to ‎src/assets/dot-circle.png

File renamed without changes.

‎static/images/rotate-mdr.png renamed to ‎src/assets/rotate-mdr.png

File renamed without changes.

‎src/components/fabric/fabric.vue

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
<script type='text/ecmascript-6'>
88
import Utils from '../../utils';
9+
const dotCircleImg = require('../../assets/dot-circle.png');
10+
const rotateMdrImg = require('../../assets/rotate-mdr.png');
911
export default {
1012
name: 'VueFabric',
1113
props: {
@@ -31,7 +33,7 @@ export default {
3133
fabric.Canvas.prototype.customiseControls({
3234
tl: {
3335
action: 'scale'
34-
// cursor: '/static/images/dot-circle.png',
36+
// cursor: '../../assets/dot-circle.png',
3537
},
3638
tr: {
3739
action: 'scale'
@@ -68,7 +70,7 @@ export default {
6870
// only is hasRotatingPoint is not set to false
6971
mtr: {
7072
action: 'rotate'
71-
// cursor: '/static/images/cow.png',
73+
// cursor: '../../assets/cow.png',
7274
}
7375
});
7476
@@ -83,26 +85,26 @@ export default {
8385
cornerBackgroundColor: '#ffffff'
8486
},
8587
tl: {
86-
icon: '/static/images/dot-circle.png'
88+
icon: dotCircleImg
8789
},
8890
tr: {
89-
icon: '/static/images/dot-circle.png'
91+
icon: dotCircleImg
9092
},
9193
bl: {
92-
icon: '/static/images/dot-circle.png'
94+
icon: dotCircleImg
9395
},
9496
br: {
95-
icon: '/static/images/dot-circle.png'
97+
icon: dotCircleImg
9698
},
9799
ml: {
98-
icon: '/static/images/dot-circle.png'
100+
icon: dotCircleImg
99101
},
100102
mr: {
101-
icon: '/static/images/dot-circle.png'
103+
icon: dotCircleImg
102104
},
103105
// only is hasRotatingPoint is not set to false
104106
mtr: {
105-
icon: '/static/images/rotate-mdr.png'
107+
icon: rotateMdrImg
106108
}
107109
},
108110
function () {
@@ -430,28 +432,28 @@ export default {
430432
cornerPadding: 10
431433
},
432434
tl: {
433-
icon: '/static/images/dot-circle.png'
435+
icon: dotCircleImg
434436
},
435437
tr: {
436-
icon: '/static/images/dot-circle.png'
438+
icon: dotCircleImg
437439
},
438440
bl: {
439-
icon: '/static/images/dot-circle.png'
441+
icon: dotCircleImg
440442
},
441443
br: {
442-
icon: '/static/images/dot-circle.png'
444+
icon: dotCircleImg
443445
},
444446
mb: {
445-
icon: '/static/images/dot-circle.png'
447+
icon: dotCircleImg
446448
},
447449
mt: {
448-
icon: '/static/images/dot-circle.png'
450+
icon: dotCircleImg
449451
},
450452
mr: {
451-
icon: '/static/images/dot-circle.png'
453+
icon: dotCircleImg
452454
},
453455
mtr: {
454-
icon: '/static/images/rotate-mdr.png'
456+
icon: rotateMdrImg
455457
}
456458
},
457459
function () {
@@ -470,16 +472,16 @@ export default {
470472
tr: true
471473
});
472474
canvas.add(img); // 把图片添加到画布上
473-
if (options.registeObjectEvent) {
475+
if (options && options.registeObjectEvent) {
474476
Utils.registeObjectEvent(that, img);
475477
}
476478
canvas.renderAll.bind(canvas);
477479
});
478480
},
479-
setBackgroundImage (url) {
480-
let canvas = this.canvas;
481-
canvas.setBackgroundImage(url, canvas.renderAll.bind(canvas));
482-
},
481+
// setBackgroundImage (url) {
482+
// let canvas = this.canvas;
483+
// canvas.setBackgroundImage(url, canvas.renderAll.bind(canvas));
484+
// },
483485
toJson () {
484486
let json = this.canvas.toJSON();
485487
return json;

0 commit comments

Comments
 (0)