更改 penColor 并绘制签名有时显示以前的颜色

问题描述

<div class="ac-esign-tool-signature_pad">
         {{ merged_options }}
         <SignaturePad :options="merged_options" width="100%" v-if="show_signature_pad" height="200px" ref="signature_pad" />
         <b-button-group class="mt-2 float-right border-0">
           <b-button @click="undo_signature_pad()" variant="white" size="sm" v-if="this.signature_pad_has_data" v-b-tooltip.hover title="Undo">
             <span class="fe fe-corner-up-left"></span>
           </b-button>
           <b-button :id="`popover-signature-pad_${_uid}`" @click="popover = !popover" variant="white" size="sm" v-b-tooltip.hover title="Change Color" v-if="this.signature_pad_has_data"
             ><span class="fe fe-feather"></span>
           </b-button>
           <b-popover v-if="this.signature_pad_has_data" :target="`popover-signature-pad_${_uid}`" :show.sync="popover" triggers="click blur" placement="bottom">
             <color-picker @input="on_input_color_picker" :value="signature_pad_color"></color-picker>
           </b-popover>
         </b-button-group>
         <span v-if="validation_message" class="text-danger">Please add the signature</span>
       </div>

**  methods **
  on_input_color_picker({ rgba }) {
    console.log("refs",this.$refs.signature_pad,`rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`);
    let color = `rgba(${rgba.r},${rgba.a})`;
    this.options = {
      penColor: color,};
    this.$nextTick(() => {
      this.$refs.signature_pad.resizeCanvas();
    });       
  },** computed **
merged_options() {
console.log("merged_options",this.options,this.changed_options);
return {
...this.options,...this.changed_options,};
},

选择了一种颜色并添加了签名，现在我已经更改了颜色，当我拖动签名时它工作正常。但是当我释放光标并再次尝试签名时，它显示的是以前的颜色，可以帮我吗

参考视频：https://drive.google.com/file/d/1D_ZByCSFEbmb1uTUThReRHr_vUwTx93P/view

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）