修改代码

src/iscs_new/animateHandle.js

@@ -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();
                 }
@@ -101,4 +102,4 @@ class AnimateHandle {
     }
 }
 
-export default AnimateHandle
+export default AnimateHandle

src/iscs_new/core/form/elementConst.js

@@ -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:[] }},
+	[elementType.Line]: {
-        {code:'text', name:'文字', formList:{style:[], shape:[] }},
+		code: elementType.Line, name:'线段', formList:{ style:[], shape:[] }
-        {code:'rect', name:'矩形', formList:{style:[], shape:[] }},
+	},
-        {code:'circle', name:'圆形', formList:{style:[], shape:[] }},
+	[elementType.Text]: {
-        {code:'polygon', name:'多边形', formList:{style:[], shape:[] }},
+		code: elementType.Text, name:'文字', formList:{ style:[], shape:[] }
-        {code:'triangle', name:'三角形', formList:{style:[], shape:[] }},
+	},
-        {code:'arrow', name:'箭头', formList:{style:[], shape:[] }},
+	[elementType.Rect]: {
-        {code:'polyline', name:'多边形折线段', formList:{style:[], shape:[] }},
+		code: elementType.Rect, name:'矩形', formList:{ style:[], shape:[] }
-        {code:'isogon', name:'正多边形', formList:{style:[], shape:[] }},
+	},
-        {code:'ellipse', name:'椭圆', formList:{style:[], shape:[] }},
+	[elementType.Circle]: {
-        {code:'arc', name:'圆弧', formList:{style:[], shape:[] }},
+		code: elementType.Circle, name:'圆形', formList:{ style:[], shape:[] }
-        {code:'sector', name:'扇形', formList:{style:[], shape:[] }},
+	},
-        {code:'heart', name:'心形', formList:{style:[], shape:[] }},
+	[elementType.Polygon]: {
-        {code:'droplet', name:'水滴', formList:{style:[], shape:[] }}
+		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:[] }
+	}
 };

src/iscs_new/core/form/form2Base.js

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

src/iscs_new/transformHandle.js

@@ -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();

src/views/test/index.vue

@@ -112,8 +112,8 @@ export default {
 								stroke: 'black'
 							},
 							stateList: [
-								{ status: 'st1', shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
+								{ status: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
-								{ status: 'st2', shape: {}, style:{ fill: 'blue', 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: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
-								{ status: 'st2', shape: {}, style:{ fill: 'blue', stroke: 'black'} }
+								{ status: 'st2', visible: true, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
 							]
 						},
 					],