调整线段画法

This commit is contained in:
zyy 2020-10-12 13:04:13 +08:00
parent 34fa34ba61
commit d27266ab7a
6 changed files with 96 additions and 81 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -27,7 +27,7 @@ export default class line extends Group {
position: [model.points[0].x, model.points[0].y]
});
// 1101 垂直渐变 1110 水平渐变
let strokeColor = this.model.fillColor;
let fillColor = this.model.fillBackground;
if (model.isGradual) {
const offsetList = [];
model.modelList.forEach(item => {
@ -37,9 +37,9 @@ export default class line extends Group {
});
});
if (model.gradualShow == 'level') {
strokeColor = new zrender.LinearGradient(1, 1, 0, 1, offsetList);
fillColor = new zrender.LinearGradient(1, 1, 0, 1, offsetList);
} else {
strokeColor = new zrender.LinearGradient(1, 1, 1, 0, offsetList);
fillColor = new zrender.LinearGradient(1, 1, 1, 0, offsetList);
}
}
const modelPoints = [];
@ -60,9 +60,13 @@ export default class line extends Group {
},
style: {
lineWidth: this.model.lineWidth,
stroke: strokeColor
stroke: this.model.fillColor
}
});
console.log(this.model.fill);
if (fillColor) {
this.iscsLine.setStyle('fill', fillColor);
}
if (model.classify == 'dashed') {
this.iscsLine.setStyle('lineDash', [8, 6]);
}

View File

@ -20,10 +20,11 @@ import blowerRedRight from '@/assets/iscs_picture/gufengji-red-r.png';
import blowerGrayRight from '@/assets/iscs_picture/gufengji-gray-r.png';
import iscsAPF from '@/assets/iscs_picture/iscs_APF.png';
import drum from '@/assets/iscs_picture/drum.png';
import exhaustFan from '@/assets/iscs_picture/exhaustFan.png'
import exhaustFan from '@/assets/iscs_picture/exhaustFan.png';
import waterCooler from '@/assets/iscs_picture/ZSDF533.png';
import textBgBluePoint from '@/assets/iscs_picture/textBgBluePoint.png';
import ventilationFan from '@/assets/iscs_picture/ventilationFan.png'
import ventilationFan from '@/assets/iscs_picture/ventilationFan.png';
import kongzhixiang from '@/assets/iscs_picture/iscs_kongzhixiang.png';
const pictureObj = {
'psdLeft': psdLeft,
@ -48,7 +49,8 @@ const pictureObj = {
exhaustFan,
waterCooler,
textBgBluePoint,
ventilationFan
ventilationFan,
kongzhixiang
};
export default class Picture extends Group {
constructor(device) {

View File

@ -5,7 +5,7 @@
<el-input-number v-model="form.z2" controls-position="right" :min="0" size="small" />
</el-form-item>
<el-form-item label="线段宽度:" prop="lineWidth">
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50" size="small" />
<el-input-number v-model="form.lineWidth" controls-position="right" :min="0" :max="50" size="small" />
</el-form-item>
<el-form-item label="类型:" prop="type">
<el-select v-model="form.classify" placeholder="请选择类型" size="small">
@ -43,7 +43,10 @@
</el-table-column>
</el-table>
</div>
<el-form-item v-if="!form.isGradual" label="线段颜色:" prop="fillColor">
<el-form-item v-if="!form.isGradual" label="线段填充色:" prop="fillColor">
<el-color-picker v-model="form.fillBackground" size="small" />
</el-form-item>
<el-form-item label="线段颜色:" prop="borderColor">
<el-color-picker v-model="form.fillColor" size="small" />
</el-form-item>
<el-form-item label="箭头显示:" prop="arrowShow">
@ -126,6 +129,7 @@ export default {
z2: 0,
lineWidth: '',
fillColor: '#fff',
fillBackground: '',
arrowShow: 'none',
arrowSize: 5,
points: [
@ -141,7 +145,7 @@ export default {
{ required: true, message: '请输入线段宽度', trigger: 'blur' }
],
fillColor: [
{ required: true, message: '请输入线段颜色', trigger: 'blur' }
{ required: true, message: '请输入线段边框颜色', trigger: 'blur' }
]
}
};
@ -162,6 +166,7 @@ export default {
this.form.z2 = model.z2 || 0;
this.form.lineWidth = model.lineWidth;
this.form.fillColor = model.fillColor;
this.form.fillBackground = model.fillBackground || '';
if (model.point1) {
this.form.points = [];
this.form.points.push(model.point1);
@ -193,6 +198,7 @@ export default {
z2: this.form.z2,
lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor,
fillBackground: this.form.fillBackground,
classify: this.form.classify,
arrowShow: this.form.arrowShow,
arrowSize: this.form.arrowSize,
@ -222,6 +228,7 @@ export default {
_type: 'IscsLine',
lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor,
fillBackground: this.form.fillBackground,
classify: this.form.classify,
arrowShow: this.form.arrowShow,
arrowSize: this.form.arrowSize
@ -236,6 +243,7 @@ export default {
code: '',
lineWidth: '',
fillColor: '#fff',
fillBackground: '',
arrowShow: 'none',
arrowSize: 5,
points: [

View File

@ -78,7 +78,8 @@ export default {
{ name: '排风机', value: 'exhaustFan' },
{ name: '冷水机', value: 'waterCooler'},
{ name: '顶部排风机', value: 'ventilationFan'},
{ name: '文字蓝色背景', value: 'textBgBluePoint'}
{ name: '文字蓝色背景', value: 'textBgBluePoint'},
{ name: '风井', value: 'kongzhixiang' }
],
rules: {
@ -149,7 +150,7 @@ export default {
_type: 'IscsPicture',
type: this.form.type,
size: this.form.size,
rotation: this.form.rotation,
rotation: this.form.rotation
};
this.$emit('deleteDataModel', rectModel);
},