feat(av-cliper): add actable prop for VisibleSprite#456
Conversation
|
目前可以通过以下代码避免 sprite 被选中然后进行交互。 avCvs.on('activeSpriteChange', (spr) => {
// 禁止底层的视频被选中
if (spr === this.#sprite) avCvs.activeSprite = null;
});有考虑过开放新的 API (与你的类似),让调用方更简单地实现该功能,但 API 还没想好。 |
|
我现在也是通过监听activeSpriteChange方法控制选中的,但是由于设置avCvs.activeSprite = null会再次触发该监听方法,就需要写一堆逻辑判断是什么情况下触发的选中值是null,做不同的处理,挺麻烦的,所以想直接加个属性值,避免多次触发监听。 如果想在UI上做提醒的话,那是不是可以把属性值改成三个值,比如0是正常(有选中边框和操作点),1是锁定(有选中边框但无操作点),2是无提示(没有选中边框和操作点),这样? |
赞同,这是 API 设计: export class VisibleSprite extends BaseSprite {
// ... 其他属性
/**
* 控制 Sprite 的交互状态
* - 'interactive': 可选中,可进行移动、缩放、旋转等所有交互
* - 'selectable': 仅可选中,但不可进行移动、缩放、旋转等交互
* - 'disabled': 不可选中,也不可交互
* @default 'interactive'
*/
interactable: 'interactive' | 'selectable' | 'disabled' = 'interactive';
copyStateTo<T extends BaseSprite>(target: T): void {
super.copyStateTo(target);
if (target instanceof VisibleSprite) {
target.visible = this.visible;
// 复制新属性的状态
target.interactable = this.interactable;
}
}
// ... 其他方法
}勇士有时间实现这个效果吗? |
|
我试试研究一下 |
|
改完了,大佬看看? |
|
请在 av-canvas 目录下 运行 pnpm dev 目前添加的视频图片素材都不可移动、缩放了,也没有 close icon。
|
|
我本地用 http://localhost:6066/video-editor.html 这个页调试过好使才提交的…… 刚又重新跑了一遍还是好使…… emmm…… 大佬,你那有什么报错什么的吗?不知道怎么查了…… |
|
Sry, 我的问题。 因为改动了 av-cliper, 所以需要构建整个项目。 |
|
🫡 感谢勇士的贡献 |


给VisibleSprite添加了actable属性,默认为true,当设置为false时,在AVCanvas上点击这个VisibleSprite不会被选中。
这样可以将这个VisibleSprite当做AVCanvas的背景使用,也可以实现简单的元素锁定功能。