新项目场景编写中的文字颜色问题——恒生寻常问道实习记录

项目场景：

1、该场景标题初始颜色为渐变色，且该标题客户能自行修改内容；
2、该场景的某段文本有一个颜色变化的动画效果，且该文本客户能自行修改文字。

---

问题描述

1、在css样式中给该标题写上渐变色的样式不生效；
2、给该文本写颜色变化动画效果失效，文字颜色不变，一直为初始设定的颜色。

---

原因分析：

1、由于该标题客户能够自行修改文字，所以使用的是公司事先写好的文本组件，该使用该组件的文字的样式，都通过事先传入数据库的json来规定。由于文字渐变色效果不能单纯通过color属性来定义，所以无法事先往数据库传入渐变色效果，并且由于json数据中的color已经给该文字赋予颜色，后续在css中写渐变色时会导致冲突，无法显示出渐变色，而依旧是json数据给定的颜色；
2、同理上一个问题，由于文字颜色固定为数据库中json数据给定的颜色，所以在进行动效变化时，新的颜色设置与给定的color样式冲突，无法正常显示，文字颜色一直为json数据给定的颜色。
以下为文本组件中规定颜色的代码部分：

methods:{
	//初始化函数
	init(){
		//获取样式
		//elementInfo由场景文本部分传输过来，elementInfo.elementData为规定样式的json数据
		this.textBoxStyle = this.getStyle(this.elementInfo.elementData);	
	}
},
//通过获取json数据，来给文本赋予各种样式
getStyle(elementStyle) {
      let _elementStyle = JSON.parse(elementStyle);
      let {background,boxShadow,textStyle} = _elementStyle;
      let {otherConfigSwitch,padding,border} = textStyle;
      let {boxShadowSwitch,hShadow,vShadow,blur} = boxShadow;
      let {backgroundSwitch,borderRadius} = background;
      let style = {};
      //其他样式这边不做描写，只写文字颜色部分
	  style['color'] = 'rgb('+textStyle.color.r+','+textStyle.color.g+','+textStyle.color.b+')';
}

---

解决方案：

1、在场景对应的文本部分，新加入两个数据传输给文本组件，一个为判断是否使用颜色渐变的布尔值，另一个数据为渐变色的数据。当布尔值为true时，表示使用渐变色，并使用新传入的渐变色数据，如为false，则按原逻辑执行。
代码如下：

//场景中文本部分代码
//该文本组件的用法	遍历所有使用文本组件的文本
<div v-for="(item, index) in sceneElementData" :key="index">
	//名为title的文本组件	
	<div v-if="item.title == 'title'">
    	<text-box
        	ref="title"
            :elementInfo="item"		//json数据传输
            :text="item.value"
            :colorChange="colorChange"		//判断是否使用渐变色的布尔值
            :textColorChange="textColorChange"		//渐变色的数据
            class="text"
         ></text-box>
    </div>
</div>

//初始化数据中给要传给组件的数据赋值
data() {
   return {
      //sceneElementData: [],  搭配文本组件使用
      //media: {},	搭配文本组件使用
      colorChange: true,	//使用渐变色
      textColorChange: {	//渐变色数据
      gradientColor: 'linear-gradient(180deg,rgba(255,255,255,1),rgba(245, 208, 166, 1))', //文字渐变色
        color: 'transparent', 
      },
   };
},

//接上的css部分
//渐变色的设置
.text {
  background-clip: text;
  -webkit-background-clip: text;
}

//文本组件部分代码
props:{
	//传入的判断是否使用渐变的布尔值
	colorChange:{
      type:Boolean,
      default:false
    },
    //传入的如使用渐变色时，渐变色的数据
    textColorChange:{
      type:Object,
      default: () => ({}),
    },
},

//获取颜色样式部分
  if(!this.colorChange){	//不使用渐变色情况
  	style['color'] = 'rgb('+textStyle.color.r+','+textStyle.color.g+','+textStyle.color.b+')';
  }else{	//使用渐变色情况
  	style['background-image'] = this.textColorChange.gradientColor;
    style['color'] = this.textColorChange.color;
}

2、该问题解决办法同上问题，在场景对应的文本部分，新加入两个数据传输给文本组件，一个为判断是否使用颜色变化动效的布尔值，另一个数据为文本颜色的数据（该数据会给一个动画效果，根据时间动态变化）。当布尔值为true时，表示使用动画效果，并使用新传入的文本颜色数据，如为false，则按原逻辑执行。
代码如下：

//场景中文本部分代码
//该文本组件的用法	遍历所有使用文本组件的文本
<div v-for="(item, index) in sceneElementData" :key="index">
	//名为smartText的文本组件	
	<div v-if="item.title == 'smartText'">
    	<text-box
        	ref="smartText"
            :elementInfo="item"		//json数据传输
            :text="item.value"
            :colorAnimationFlag="colorAnimationFlag"	//判断是否有动画效果的布尔值
            :colorAnimation="{		//颜色变化动画效果的数据
              color: 'rgba(' + rSize + ',' + gSize + ',' + bSize + ',' + aSize + ')',
            }"
            class="text"
         ></text-box>
    </div>
</div>

//初始化数据中给要传给组件的数据赋值
data() {
   return {
      //sceneElementData: [],  搭配文本组件使用
      //media: {},	搭配文本组件使用
      colorAnimationFlag: true,		//判断是否有动效
      rSize: 0,
      gSize: 0,
      bSize: 0,
      aSize: 0.7,		//文字初始颜色
   };
},


//动画效果部分
setVideo() {
		//根据时间计算在整个场景的时间比例位置，后续使用已写好的动效函数（cVal函数，也是个组件，专门用于场景中动效的编写）和编写前准备工作做的动效切割，将动画效果对应该场景的开始时间比例位置和结束时间比例位置填入函数即可
      let speed = this.$util.getFixed((this.difTime / this.timeTotal) * 100);
      if (speed <= 40) {
      //在时间比例30.5~37.5时，颜色由灰变白，透明度由0.7变为1（前两位为时间比例，后两位为数值的起始和结束）
        this.rSize = cVal(speed, 30.5, 37.5, 68, 255);
        this.gSize = cVal(speed, 30.5, 37.5, 72, 255);
        this.bSize = cVal(speed, 30.5, 37.5, 101, 255);
        this.aSize = cVal(speed, 30.5, 37.5, 0.7, 1);
      } else {
      //在时间比例62.5~69.5时，颜色由白变灰，透明度由1变为0.7
        this.rSize = cVal(speed, 62.5, 69.5, 255, 68);
        this.gSize = cVal(speed, 62.5, 69.5, 255, 72);
        this.bSize = cVal(speed, 62.5, 69.5, 255, 101);
        this.aSize = cVal(speed, 62.5, 69.5, 1, 0.7);
      }
}

//文本组件部分代码
props:{
	//传入的判断是否使用动效的布尔值
	colorAnimationFlag:{
      type:Boolean,
      default:false
    },
    //传入的如使用动效时，文本颜色动效的数据
    colorAnimation:{
      type:Object,
      default: () => ({
      }),
    }
},

//获取颜色样式部分
  if(!this.colorChange){	//不使用颜色动效情况
  	style['color'] = 'rgb('+textStyle.color.r+','+textStyle.color.g+','+textStyle.color.b+')';
  }else{	//使用颜色动效情况
  	style['color'] = this.colorAnimation.color;
}

可对该问题的两种情况在获取颜色样式部分进行合并

if(!this.colorChange && !this.colorAnimationFlag){
	style['color'] = 'rgb('+textStyle.color.r+','+textStyle.color.g+','+textStyle.color.b+')';
}else if(this.colorChange && !this.colorAnimationFlag){
	style['background-image'] = this.textColorChange.gradientColor;
}else{
	style['color'] = this.colorAnimation.color;
}

还存在的问题：

1、文字渐变色和颜色动效无法同时在同一个文本上实现；
2、如果设置了渐变色或者颜色动效，那原本文本组件中客户能自己设置文本样式中设置文本颜色样式这一功能会失效，客户无法自己设置文本颜色，目前该问题没有解决的办法，因为如果要修改文本的颜色，那么必须让原本组件中通过json数据设定颜色的方法失效，而客户修改颜色则是通过后端的逻辑修改了数据库中的json数据从而修改文本颜色，因此从前端技术层面出发，两者无法兼顾。