|
|
@@ -31,13 +31,18 @@ export default {
|
|
|
// type: [String, Object],
|
|
|
default: ''
|
|
|
},
|
|
|
- x:{
|
|
|
- type:Number,
|
|
|
- default:600
|
|
|
- },
|
|
|
- y:{
|
|
|
- type:Number,
|
|
|
- default:240
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ width: 600, //画布宽度
|
|
|
+ height: 240, //画布高度
|
|
|
+ lineColor: 'red', //画笔颜色
|
|
|
+ lineWidth: 3, //画笔粗细
|
|
|
+ textColor: 'red', //文字颜色
|
|
|
+ textSize: 16 //文字大小
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -123,9 +128,9 @@ export default {
|
|
|
if (!this.text) {
|
|
|
this.text = new Konva.Text({
|
|
|
id: this.$tools.guid(),
|
|
|
- fontSize: 16,
|
|
|
+ fontSize: this.options.textSize,
|
|
|
text: '',
|
|
|
- fill: 'red',
|
|
|
+ fill: this.options.textColor,
|
|
|
lineHeight: 1.5,
|
|
|
width: 180,
|
|
|
height: 30,
|
|
|
@@ -218,8 +223,8 @@ export default {
|
|
|
if (!this.line) {
|
|
|
this.line = new Konva.Line({
|
|
|
id: this.$tools.guid(),
|
|
|
- stroke: 'red',
|
|
|
- strokeWidth: 3,
|
|
|
+ stroke: this.options.lineColor,
|
|
|
+ strokeWidth: this.options.lineWidth,
|
|
|
draggable: false,
|
|
|
tension: 1,
|
|
|
points: [_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault]
|
|
|
@@ -588,8 +593,8 @@ export default {
|
|
|
_this.stage = new Konva.Stage({
|
|
|
container: 'container',
|
|
|
id: 'canvas',
|
|
|
- width: this.x,
|
|
|
- height: this.y
|
|
|
+ width: this.options.width,
|
|
|
+ height: this.options.height
|
|
|
})
|
|
|
_this.orgLayer = new Konva.Layer()
|
|
|
_this.markLayer = new Konva.Layer()
|
