修改代码

This commit is contained in:
ival 2021-04-06 11:29:22 +08:00
parent c735f4dd50
commit 1639866515
5 changed files with 79 additions and 54 deletions

View File

@ -65,6 +65,7 @@ class Animate {
const view = mapView[name];
const model = frame[name];
if (view && model) {
model.visible? view.show(): view.hide();
view.attr({shape: model.shape, style: model.style});
view.dirty();
}

View File

@ -4,19 +4,43 @@ import * as graphic from '../../core/graphic';
const elementType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
export const elementConst = {
[elementType.Line]: {code: elementType.Line, name:'线段', formList:{style:[], shape:[] }},
{code:'text', name:'文字', formList:{style:[], shape:[] }},
{code:'rect', name:'矩形', formList:{style:[], shape:[] }},
{code:'circle', name:'圆形', formList:{style:[], shape:[] }},
{code:'polygon', name:'多边形', formList:{style:[], shape:[] }},
{code:'triangle', name:'三角形', formList:{style:[], shape:[] }},
{code:'arrow', name:'箭头', formList:{style:[], shape:[] }},
{code:'polyline', name:'多边形折线段', formList:{style:[], shape:[] }},
{code:'isogon', name:'正多边形', formList:{style:[], shape:[] }},
{code:'ellipse', name:'椭圆', formList:{style:[], shape:[] }},
{code:'arc', name:'圆弧', formList:{style:[], shape:[] }},
{code:'sector', name:'扇形', formList:{style:[], shape:[] }},
{code:'heart', name:'心形', formList:{style:[], shape:[] }},
{code:'droplet', name:'水滴', formList:{style:[], shape:[] }}
]
[elementType.Line]: {
code: elementType.Line, name:'线段', formList:{ style:[], shape:[] }
},
[elementType.Text]: {
code: elementType.Text, name:'文字', formList:{ style:[], shape:[] }
},
[elementType.Rect]: {
code: elementType.Rect, name:'矩形', formList:{ style:[], shape:[] }
},
[elementType.Circle]: {
code: elementType.Circle, name:'圆形', formList:{ style:[], shape:[] }
},
[elementType.Polygon]: {
code: elementType.Polygon, name:'多边形', formList:{ style:[], shape:[] }
},
[elementType.Arrow]: {
code: elementType.Arrow, name:'箭头', formList:{ style:[], shape:[] }
},
[elementType.Polyline]: {
code: elementType.Polyline, name:'多边形折线段', formList:{ style:[], shape:[] }
},
[elementType.Isogon]: {
code: elementType.Isogon, name:'正多边形', formList:{ style:[], shape:[] }
},
[elementType.Ellipse]: {
code: elementType.Ellipse, name:'椭圆', formList:{ style:[], shape:[] }
},
[elementType.Arc]: {
code: elementType.Arc, name:'圆弧', formList:{style:[], shape:[] }
},
[elementType.Sector]: {
code: elementType.Sector, name:'扇形', formList:{style:[], shape:[] }
},
[elementType.Heart]: {
code: elementType.Heart, name:'心形', formList:{style:[], shape:[] }
},
[elementType.Droplet]: {
code: elementType.Droplet, name:'水滴', formList:{style:[], shape:[] }
}
};

View File

@ -1,36 +1,39 @@
export default [
// number 0 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
{ prop: 'z',
label: '层级 z',
type: 'number', precisionFlag:0, min:0, max:100, step:1,
{ prop: 'z1',
label: '层级 z1',
type: 'number',
precisionFlag: 0,
min:0,
max:20,
step:1,
rules:[
{ required: true, message:'请输入层级z', trigger: 'blur' }
],
value: 1,
description: ''
value: 10,
description: '控制图形的前后顺序。'
},
{ prop: 'z2', label: '层级 z2',
type: 'number', precisionFlag:0, min:0, max:100, step:1,
rules:[{ required: true, message:'请输入层级z2', trigger: 'blur' }],
defValue: 10, required:true
{
prop: 'z2',
label: '层级 z2',
type: 'number',
precisionFlag: 0,
min: 0,
max: 100,
step: 1,
rules:[
{ required: true, message:'请输入层级z2', trigger: 'blur' }
],
value: 50,
description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。'
},
{
prop: 'visible',
label: '图形是否可见',
type: props.Boolean,
rules:[
{ required: true, message:'请输入层级z2', trigger: 'blur' }
],
value: false,
description: '图形是否可见,为 false 时不绘制图形。'
}
// boolean false 图形是否不可见,为 true 时不绘制图形,但是仍能触发鼠标事件。
// {prop: 'invisible', label: '不可见', type: 'switch', defValue: false,required:true},
// // boolean false 是否响应鼠标事件。
// {prop: 'silent', label: '响应鼠标事件', type: 'switch', defValue: false,required:true}
// // boolean false 是否进行裁剪。
// culling: {
// },
// // string 'pointer' 鼠标移到元素上时的鼠标样式。
// cursor: {
// },
// // boolean false 图形是否可拖曳。
// draggable: {
// },
// // number -1 是否渐进式渲染。当图形元素过多时才使用,用大于 0 的数字表示渲染顺序。
// progressive: {
// },
// // boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
// rectHover: {
// },
];

View File

@ -15,18 +15,15 @@ export default class TransformHandle {
// 检查显隐
checkVisible(shape) {
return utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
return shape.model.visible && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
}
// 重新计算显隐
visibleView(shape) {
let visible = false;
if (this.checkVisible(shape)) {
shape.show();
visible = true;
} else {
shape.hide();
visible = false;
}
shape.dirty();

View File

@ -112,8 +112,8 @@ export default {
stroke: 'black'
},
stateList: [
{ status: 'st1', shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
{ status: 'st2', shape: {}, style:{ fill: 'blue', stroke: 'black'} }
{ status: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
{ status: 'st2', visible: true, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
]
},
{ name: 'b',
@ -124,8 +124,8 @@ export default {
stroke: 'black'
},
stateList: [
{ status: 'st1', shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
{ status: 'st2', shape: {}, style:{ fill: 'blue', stroke: 'black'} }
{ status: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
{ status: 'st2', visible: true, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
]
},
],