Tuya Developer Forum

在看LampStripLightSmear的的源码的时候发现有一个@ray-js/pencil-flow库,我在已经这个库写canvas的时候给每个图形添加事件无效,无法实现像LampStripLightSmear一样给每个图像添加事件, 只要滑动一次就无法打印log了,无法触发事件了

  addIdxShapeIns(idx, _data) {
    // 防止重复生成相同的shape
    if (this[idx]) {
      return this[idx];
    }
    const preDataKey = `preData_${idx}`;
    const preData = this[preDataKey];
    let shape = null;
    if (preData) {
      const isEqualObj = isEqual(preData, _data);
      if (!isEqualObj) {
        shape = new Round(_data);
        this[preDataKey] = _data;
      }
    } else {
      shape = new Round(_data);
      this[preDataKey] = _data;
    }
    if (!shape) {
      return;
    }
    this[idx] = shape;
    // 添加事件
    shape.on(TRIGGER_EVENT_MOVE, this.shapeTouchMove);
    shape.on(TRIGGER_EVENT_END, this.shapeTouchEnd);
    this.stage.add(shape); // 渲染 canvas
  },
    shapeTouchEnd(e) {
    console.log('shapeTouchEnd', e);
    const value = e.target.data;
    this.touchend(value.idx);
  },

  shapeTouchMove(e) {
    console.log('shapeTouchMove', e);
    const value = e.target.data;
    this.touchmove(value.idx);
  },

请先参考文档使用： https://asset-cn.tuya-inc.com:7799/libr ... PencilFlow， 如果还是不行请提供下比较完整可复现的代码

crisiron 2025年 May 29日 11:30

请先参考文档使用： https://developer.tuya.com/material/lib ... leProgress， 如果还是不行请提供下比较完整可复现的代码

这个是我基于https://developer.tuya.com/material/library_oHEKLjj0/component?code=LampStripLightSmear组件源码进行修改的代码, 但是发现修改后给每个图像绑定的事件异常

crisiron 2025年 May 29日 11:30

请先参考文档使用： https://developer.tuya.com/material/lib ... leProgress， 如果还是不行请提供下比较完整可复现的代码

我已经定位到问题了,当我在图像内部move并且end事件触发后在触发其他图像的事件没问题,当我在A图像move移动到B图像的时候结束事件就会出现问题

这个问题已经解决了,但是还有一个问题就是再更新color的时候画布不会更新,我再node_modules的stage.js更新color打印出来了log,但是canvas没更新,大佬指点一下, console.log('Stageupdate'); 这个log已经打印出来了,颜色没变化

  _createClass(Stage, [{
    key: "update",
    value: function update() {
      console.log('Stageupdate');
      this.render.update(this);
    }
  }

MwM-Mai 2025年 May 30日 14:55

这个问题已经解决了,但是还有一个问题就是再更新color的时候画布不会更新,我再node_modules的stage.js更新color打印出来了log,但是canvas没更新,大佬指点一下, console.log('Stageupdate'); 这个log已经打印出来了,颜色没变化

Code: Select all

  _createClass(Stage, [{
    key: "update",
    value: function update() {
      console.log('Stageupdate');
      this.render.update(this);
    }
  }

怎么更新的,提供下复现代码(代码中尽量减少业务代码，好排查问题)

crisiron 2025年 May 30日 15:14

MwM-Mai 2025年 May 30日 14:55

这个问题已经解决了,但是还有一个问题就是再更新color的时候画布不会更新,我再node_modules的stage.js更新color打印出来了log,但是canvas没更新,大佬指点一下, console.log('Stageupdate'); 这个log已经打印出来了,颜色没变化

Code: Select all

  _createClass(Stage, [{
    key: "update",
    value: function update() {
      console.log('Stageupdate');
      this.render.update(this);
    }
  }

怎么更新的,提供下复现代码(代码中尽量减少业务代码，好排查问题)

// 更新颜色代码示例：
      rect2.on('touchend', event => {
        const { option } = event.target || {};
        if (option && option.id !== undefined) {
          console.log('id touchend', rect2, option.id);
// 重点 如果要更新颜色，使用 rect2.option.fillStyle 
          rect2.option.fillStyle = 'red';
          rect2.alpha = 1;
          stage.update();
        }
      });

crisiron 2025年 May 30日 15:34

crisiron 2025年 May 30日 15:14

MwM-Mai 2025年 May 30日 14:55

这个问题已经解决了,但是还有一个问题就是再更新color的时候画布不会更新,我再node_modules的stage.js更新color打印出来了log,但是canvas没更新,大佬指点一下, console.log('Stageupdate'); 这个log已经打印出来了,颜色没变化

Code: Select all

  _createClass(Stage, [{
    key: "update",
    value: function update() {
      console.log('Stageupdate');
      this.render.update(this);
    }
  }

怎么更新的,提供下复现代码(代码中尽量减少业务代码，好排查问题)

Code: Select all

// 更新颜色代码示例：
      rect2.on('touchend', event => {
        const { option } = event.target || {};
        if (option && option.id !== undefined) {
          console.log('id touchend', rect2, option.id);
// 重点 如果要更新颜色，使用 rect2.option.fillStyle 
          rect2.option.fillStyle = 'red';
          rect2.alpha = 1;
          stage.update();
        }
      });

更新的代码和LampStripLightSmear这个物料组件的示例代码一样,但是我用的是我修改后的组件

MwM-Mai 2025年 May 30日 15:40

crisiron 2025年 May 30日 15:34

crisiron 2025年 May 30日 15:14

怎么更新的,提供下复现代码(代码中尽量减少业务代码，好排查问题)

Code: Select all

// 更新颜色代码示例：
      rect2.on('touchend', event => {
        const { option } = event.target || {};
        if (option && option.id !== undefined) {
          console.log('id touchend', rect2, option.id);
// 重点 如果要更新颜色，使用 rect2.option.fillStyle 
          rect2.option.fillStyle = 'red';
          rect2.alpha = 1;
          stage.update();
        }
      });

更新的代码和LampStripLightSmear这个物料组件的示例代码一样,但是我用的是我修改后的组件

先自行排查下逻辑，看看跟物料组件更新代码的区别点在哪

crisiron 2025年 May 30日 15:53

MwM-Mai 2025年 May 30日 15:40

crisiron 2025年 May 30日 15:34

Code: Select all

// 更新颜色代码示例：
      rect2.on('touchend', event => {
        const { option } = event.target || {};
        if (option && option.id !== undefined) {
          console.log('id touchend', rect2, option.id);
// 重点 如果要更新颜色，使用 rect2.option.fillStyle 
          rect2.option.fillStyle = 'red';
          rect2.alpha = 1;
          stage.update();
        }
      });

更新的代码和LampStripLightSmear这个物料组件的示例代码一样,但是我用的是我修改后的组件

先自行排查下逻辑，看看跟物料组件更新代码的区别点在哪

const line = new Line(element);
this.stage.add(line);
影响了滑动等事件,有没有什么办法解决