优化皮肤配置

This commit is contained in:
ival 2021-04-07 10:05:17 +08:00
parent cad7ff2129
commit 74d82f5872
12 changed files with 37 additions and 44 deletions

View File

@ -36,7 +36,7 @@ class Animate {
}
isNeedDefault() {
return this._state.needDefault; // && this.getIndex() == 0;
return this._state.needDefault;
}
isDispose() {
@ -67,7 +67,7 @@ class Animate {
const state = mapShape[name]
const view = mapView[name];
if (view) {
shape.setSightless(shape.model.sightless);
shape.setInvisible(shape.model.sightless);
view.attr({shape: state.default.shape, style: state.default.style});
view.dirty();
}
@ -78,7 +78,7 @@ class Animate {
const view = mapView[name];
const model = frame[name];
if (view && model) {
shape.setSightless(shape.model.sightless||model.sightless);
shape.setInvisible(shape.model.sightless||model.sightless);
view.attr({shape: model.shape, style: model.style});
view.dirty();
}
@ -96,7 +96,7 @@ class AnimateHandle {
this._animates = [];
}
onframe (delay) {
onframe(delay) {
const animate = this._animates.shift();
if (animate) {
animate.run(delay);

View File

@ -6,34 +6,25 @@ const defaultStyle = {
backgroundColor : '#000000',
/** 默认字体 族类*/
fontFamily : '黑体,Times New Roman',
fontFamily : 'SimSun,Times New Roman',
/** 默认字体 大小*/
fontSize : 12,
/** 文字高亮颜色*/
textHover2Color : '#6000ff',
/** 线条高亮颜色*/
lineHover2Color : '#ffff00',
/** Svg高亮颜色*/
svgHover2Color : '#62ff00',
/** 图片高亮遮罩*/
maskHover2Image : '',
/** 选中透明度*/
maskOpacity : 0.8,
opacity : 0.5,
/** 提亮度*/
liftLevel : 0.5,
liftLevel : 0.8,
/** 边框宽度*/
borderWidth : 1,
/** 边框颜色*/
borderColor : '#000'
borderColor : '#000',
/** 边框Dash*/
borderDash: [4, 4]
}
export default defaultStyle;

View File

@ -1,7 +1,9 @@
import * as graphic from '../core/graphic';
import * as utils from '../utils/utils';
import * as color from 'zrender/src/tool/color';
import Group from 'zrender/src/container/Group';
import shapeRender from '../constant/shapeRender';
import defaultStyle from '../config/defaultStyle';
function shapeStyleBuilder(model) {
return {
@ -17,14 +19,17 @@ function shapeStyleBuilder(model) {
height: 0
},
style: {
lineWidth: 1,
stroke: 'rgba(255,255,255,0.5)',
fill: 'rgba(200,200,200,0.5)'
lineWidth: defaultStyle.borderWidth,
stroke: color.lift(defaultStyle.borderColor, defaultStyle.liftLevel),
fill: `rgba(200,200,200,0.5)`
}
}
}
console.log(color);
// 图形抽象层
// 继承Group是为了直接获取的到包围框不需要进行坐标变化。
class AbstractShape extends Group {
constructor({model, shapeType, shapeFactory}) {
super({...shapeRender, code: model.code, type: model.type});
@ -48,11 +53,10 @@ class AbstractShape extends Group {
}
// 设置显隐
setSightless(sightless) {
setInvisible(sightless) {
sightless ? this.hide(): this.show();
}
// 设置高亮
active() {}

View File

@ -14,8 +14,7 @@ function shapeStyleBuilder({shape}) {
cursor: 'crosshair',
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
fill: `rgba(200,200,200,0.5)`
}
}
}

View File

@ -10,9 +10,8 @@ function lineStyleBuilder() {
z: 9998,
shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
style: {
opacity: 0.8,
lineWidth: 2,
stroke: '#ff0000'
stroke: `rgba(200,200,200,0.8)`
}
}
}
@ -27,7 +26,7 @@ function circleStyleBuilder({shape}) {
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
fill: `rgba(200,200,200,0.3)`
},
}
}

View File

@ -48,7 +48,7 @@ class Compose extends AbstractShape {
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.add(this.instance);
this.setSightless(this.model.sightless)
this.setInvisible(this.model.sightless)
}
// 设置高亮

View File

@ -44,7 +44,7 @@ class Element extends AbstractShape {
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.add(this.instance);
this.setSightless(this.model.sightless)
this.setInvisible(this.model.sightless)
}
}

View File

@ -10,6 +10,7 @@ import shapeEvent from '../constant/shapeEvent';
import orders from '../utils/orders';
import shapeLayer from '../constant/shapeLayer';
import templateParser from './templateParser';
import defaultStyle from '../config/defaultStyle';
const None = e => null;
const shapeBuilderMap = {
@ -29,10 +30,10 @@ function shapeStyleBuilder() {
height: 0
},
style: {
lineDash: [4, 4],
lineWidth: 1,
stroke: '#000',
fill: 'transparent'
lineDash: defaultStyle.borderDash,
lineWidth: defaultStyle.borderWidth,
stroke: defaultStyle.borderColor,
fill: defaultStyle.transparentColor
}
}
}

View File

@ -20,7 +20,7 @@ class Painter extends Group {
// 动画处理器
this.$animateHandle = new AnimateHandle(this);
// 重新动画函数,加入钩子
// 重写onFrame加入钩子
this.onframe(zr);
}

View File

@ -1,6 +1,7 @@
import * as graphic from './core/graphic.js';
import shapeRender from './constant/shapeRender';
import shapeLayer from './constant/shapeLayer';
import defaultStyle from './config/defaultStyle';
function shapeStyleBuilder() {
return {
@ -14,9 +15,7 @@ function shapeStyleBuilder() {
height: 0
},
style: {
lineWidth: 0,
stroke: '#000',
fill: 'rgba(200,200,200,0.3)'
fill: `rgba(200,200,200,0.3)`
}
}
}

View File

@ -21,8 +21,6 @@ export default class StateHandle {
// );
// }
console.log(template, 11)
return {
...state,
...templateState,

View File

@ -15,12 +15,14 @@ export default class TransformHandle {
// 检查显隐
checkVisible(shape) {
return shape.model && !shape.model.sightless && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
return shape.model && !shape.model.sightless || utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
}
// 重新计算显隐
visibleView(shape) {
this.checkVisible(shape) ? shape.show(): shape.hide();
this.checkVisible(shape)
? shape.show()
: shape.hide();
shape.dirty();
}