# test_clone **Repository Path**: onedays7/test_clone ## Basic Information - **Project Name**: test_clone - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-02-21 - **Last Updated**: 2024-02-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #master2130 svg中文手册：http://know.webhek.com/svg/svg-drop-shadows.html svg mozilla手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feDropShadow 倒影：https://www.zhangxinxu.com/study/201608/svg-element-reflect.html svg 文字：https://blog.csdn.net/baidu_38242832/article/details/115058994 markdown：https://zhuanlan.zhihu.com/p/632381789/ canvas三方库 Fabric.js(暂时不用): Fabric.js https://github.com/fabricjs/fabric.js Fabric.js中文教程 https://github.com/Rookie-Birds/Fabric-Tutorial_zh-CN --- ###结构： * 1、Laya的 canvas 渲染层级 位于 所有Svg之上，即 Laya的UI会覆盖掉 所有的 Svg； * 2、所有的逻辑计算 交互 均由Laya的节点控制，Laya外的Svg仅作渲染使用； --- ###功能进度： * [√]其他网页 或 文件夹的png/jpg图片直接拖入到Laya转为 File/H5的Image/Laya.Image/Base64Url/OpenCVMat * [√]Svg独立渲染为png(使用 svg2png wasm库 大图较慢) * [√]Svg独立渲染为png 修复 svg 无法渲染内带png的BUG * [√]Svg独立渲染为png 修复 svg 无法渲染内带text字体的BUG(svg2png仅支持渲染默认字体Yahei) * [√]Svg层级测试 * [√]Svg操作框-移动 * [√]Svg操作框-旋转(按中心点) * [√]Svg操作框-放缩(按左上角) * [√]Svg操作框-移动到SVG对象上 鼠标变 移动样式 * [√]Svg操作框-按住Ctrl(或Shift)多选 * [√]Svg操作框-多选时 同步操作对象的 移动、旋转、放缩 到其他复选对象 * [√]Svg操作框-对程序化Svg的形状修改实现(黄色菱形图标) * [√]Svg操作框-裁剪-程序化Svg图形 RectCtrlComp 交互(井线 控制点 灰色遮罩)UI 放缩控制点加入ctrl_前缀 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 移动 放缩 同步纹理 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 主对象 放缩 同步纹理 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 在非Crop模式时 随主对象 移动 旋转 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 在非Crop模式时 随主对象 放缩 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 循环修改 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 创建时 svg隐藏，进入Crop模式时显示 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 离开Crop模式时 svg隐藏 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 底图 加入暗色滤镜 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 矩形 改 其他形状 * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 重置图片 （非矩形SVG 还原到 标准矩形） * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 重置图片及其大小 （还原到 底图初始状态 包括 尺寸 旋转 放缩） * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 更改形状后的 纹理BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 初始化位置BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 主对象放缩拉大后 矩形Mask计算BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 切换形状后 纹理裁剪矩形Mask计算 BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 旋转后 纹理裁剪矩形Mask计算 BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 逻辑会导致带text的 SvgObj 放缩报错的 BUG * [√]Svg操作框-裁剪-程序化Svg图形 SvgMImg 修复 与 柔边特效的mask层级冲突 BUG * [√]Svg操作框-裁剪-程序化Svg图形 完整逻辑与交互 * [√]Svg操作框-裁剪-程序化Svg图形 拉取文件浏览器 获取单个图片文件 ImgU.InputFi 功能 * [√]Svg操作框-裁剪-程序化Svg图形 弹出文件选择菜单 更换图片 * [√]Svg操作框-裁剪-程序化Svg图形 拖入加载的图片 及 其他方式上传的图片 更新原始长宽到 底图的 ow oh * [√]Svg操作框-裁剪-裁剪为横纵比 * [√]Svg操作框-裁剪-修复 进入裁剪模式后 底图放缩必须先点击一次底图才能放缩的BUG * Svg操作框-放缩时 数据显示 ★ ←········ * ~~Svg操作框-碰撞检测改为Box2d实现 ★~~ * ~~Svg操作框-Box2d基础上实现 凹体拆分检测 ★~~ * [√]鼠标拖动区域选择框(从左上到右下: 全部覆盖算选中) * [√]程序化Svg图形 生成架构 * [√]程序化Svg图形 标准 Rect * [√]程序化Svg图形 4圆角Rect 等 7个Rect衍生图形 * [√]程序化Svg图形 椭圆/三角型/平行四边形/梯形/菱形/正五边形/可变正六边形 * [√]程序化Svg图形 边缘适配，自动调整 viewBox {基于线宽} * [√]程序化Svg图形 渐变填充 线性/径向 * [√]程序化Svg图形 png/jpg图纹理填充 拉伸/平铺 * [√]程序化Svg图形 隐藏 显示功能 * [√]程序化Svg图形 样式-阴影-外阴影 * [√]程序化Svg图形 样式-阴影-外阴影-viewBox自动调整算法 * ~~程序化Svg图形 样式-阴影-外阴影-支持修改阴影大小 ☆~~ * [√]程序化Svg图形 样式-阴影-外阴影 修复 d修改后 扩边距离未计算更新BUG * [√]程序化Svg图形 样式-阴影-内阴影 * ~~程序化Svg图形 样式-阴影-透视阴影 ☆~~ * [√]程序化Svg图形 样式-映像(倒影)[Style] * [√]程序化Svg图形 样式-发光[Style] * [√]程序化Svg图形 样式-柔化边缘 * [√]程序化Svg图形 样式动态 获取 逻辑及方法 * [√]程序化Svg图形 样式动态 添加/修改 逻辑及方法 * [√]程序化Svg图形 样式动态 删除 逻辑及方法 * [√]程序化Svg图形 样式动态 处理[内阴影/外阴影][渐变填充/图片填充] 互斥 * [√]程序化Svg图形 样式动态 操作 方法Demo * [√]程序化Svg图形 样式-纯色填充 sFill() gFill() dFill() gFillAlpha() * [√]程序化Svg图形 样式-纯色填充 修复 删除后 或初始化为null时 显示为黑色的BUG * [√]程序化Svg图形 样式-填充 删除后 再恢复 保留原透明度 * [√]程序化Svg图形 样式-边框 线条宽度/样式 sStroke() gStrokeWidth() gStrokeDash() * [√]程序化Svg图形 样式-边框-透明度 sStroke() * [√]程序化Svg图形 样式-边框-纯色 sStroke() * [√]程序化Svg图形 样式-边框-渐变填充(线性/径向) sStroke() gStroke() gStrokeAlpha() dStroke() * [√]程序化Svg图形 样式-边框 操作方法Demo * [√]程序化Svg图形 样式-柔化边缘 参数BUG * [√]程序化Svg图形 样式-修复 设置或删除后 id未同步到gp的BUG * [√]程序化Svg图形 样式-外阴影和柔化边缘 样式挂载移动到 SvgObj 分别对应 gft/gm * 程序化Svg图形 样式-修复 内边缘 裁剪后 计算BUG ★★ ←-------- * 程序化Svg图形 样式-修复 柔化边缘 裁剪后 计算BUG ★ ←-------- * [√]程序化Svg图形 文字基础及工艺架构CTE * [√]程序化Svg图形 文字-自定义字体 * [√]程序化Svg图形 文字-文字大小 * [√]程序化Svg图形 文字-段落 左对齐 右对齐 居中对齐 * ~~程序化Svg图形 文字-段落 分散对齐 ★★★~~ * [√]程序化Svg图形 文字-段落 上对齐 下对齐 居中对齐 * ~~程序化Svg图形 文字-段落 减少缩进 增加缩进 ★~~ * [√]程序化Svg图形 文字-段落 行距 * [√]程序化Svg图形 文字-文本框-文本自动调整-不自动调整（文字可能超出背景） * ~~程序化Svg图形 文字-文本框-文本自动调整-溢出时缩排文字 ★★~~ * [√]程序化Svg图形 文字-文本框-文本自动调整-根据文字调整形状大小 * [√]程序化Svg图形 文字-文本框 修复 双击后 未自动显示光标的BUG * [√]程序化Svg图形 文字-文本框 框选字超出文本框外 选中框会消失的交互BUG * [√]程序化Svg图形 文字-文本框 双击后 会自动跳出编辑模式的BUG(画布系统后才出现的) * ~~程序化Svg图形 文字-文本框-文字方向 横排 竖排 ☆~~ * [√]程序化Svg图形 文字-文本框-文字边距 * [√]程序化Svg图形 文字-填充-纯色 透明度 * [√]程序化Svg图形 文字-填充-渐变填充 * [√]程序化Svg图形 文字-填充-图片填充 * [√]程序化Svg图形 文字-边框-纯色 * [√]程序化Svg图形 文字-边框-渐变 * [√]程序化Svg图形 文字-边框-线宽 透明度 Dash * [√]程序化Svg图形 文字-阴影-外阴影 * [√]程序化Svg图形 文字-阴影-内阴影 * ~~程序化Svg图形 文字-阴影-透视阴影 ☆~~ * ~~程序化Svg图形 文字-映像(倒影) ☆~~ * [√]程序化Svg图形 文字-发光 * [√]程序化Svg图形 文字-输入框 及托管给 JsUIComp 交互 * [√]程序化Svg图形 文字-数据托管给 SvgObj * [√]程序化Svg图形 文字-SvgText 提供 获取当前选择的文字的 Eff Fill Stroke等属性 * [√]程序化Svg图形 文字-优化文本编辑器Editor销毁BUG * [√]程序化Svg图形 布局-锁定横纵比 scale 4个角控制点 * [√]程序化Svg图形 布局-SvgObj/SvgMIng 增加 pctW pctH 计算方法 * [√]程序化Svg图形 布局-SvgObj 在用户手动创建后 以该尺寸为原始大小（SvgMIng还是使用Png原始尺寸） * [√]程序化Svg图形 布局-对齐 左对齐 * [√]程序化Svg图形 布局-对齐 居中 * [√]程序化Svg图形 布局-对齐 右对齐 * [√]程序化Svg图形 布局-对齐 顶部对齐 * [√]程序化Svg图形 布局-对齐 垂直对齐 * [√]程序化Svg图形 布局-对齐 底部对齐 * [√]程序化Svg图形 图形+文字编辑 拖动 旋转 交互测试OK * [√]程序化Svg图形 文字对象/图形对象 在鼠标位置动态创建 * [√]程序化Svg图形 在画布拖动鼠标确定创建大小 * [√]程序化Svg图形 画布鼠标右键 在画布拖动鼠标创建 文字对象 * [√]程序化Svg图形 画布鼠标右键 在画布拖动鼠标创建 图形对象 * [√]程序化Svg图形 文件/其他浏览器图片拖入画布 静默自动上传(相当于自动套一个矩形SVG，但是会记录基础数据，可以用于重置) * [√]程序化Svg图形 文件/其他浏览器图片拖入画布 上传接口修改为 其他格式全部转png,以兼容pattern图片 复制到剪切板, 同时修复 ori_img 未替换为 api结果的BUG * [√]程序化Svg图形 pattern图片 复制到剪切板，并在ps中可以实现直接粘贴(目前只能实现png格式) * [√]程序化Svg图形 pattern图片 主动拉起下载 * [√]程序化Svg图形 由标准矩形 手动 改为其他形状 * [√]程序化Svg图形 由其他形状 手动 改为标准矩形 * [√]程序化Svg图形 RectCtrlComp 直接 设置坐标 方法 pos() * [√]程序化Svg图形 RectCtrlComp 直接 设置尺寸 方法 sc() * [√]程序化Svg图形 RectCtrlComp 直接 设置角度 方法 ro() * ~~程序化Svg图形 修复 由1控制点 改2控制点形状后 第二个形状控制点不显示 但是可以正确交互的BUG ★~~ * 程序化Svg图形 修复 放缩时 变形点随动计算结果不合理BUG ★★ ←········ * [√]程序化Svg图形 修复 图片拖入 类型解析错误的BUG * [√]程序化Svg图形 修复 图片拖入 外阴影扩边未计算BUG * [√]程序化Svg图形 优化 图片拖入/导入图片 中心点 * [√]程序化Svg图形 Json数据 导出功能实现 * [√]程序化Svg图形 PageComp 封装 svg+fonts 转 base64 后提交服务器进行渲染 * [√]程序化Svg图形 Pape Json数据 导出 * [√]程序化Svg图形 Pape Json数据 导入Dialong 及 数据验证 * [√]程序化Svg图形 CoComp KeyBoard 键盘逻辑独立出来 * [√]程序化Svg图形 Svg操作框- SvgMImg 复制、粘贴 * [√]程序化Svg图形 Svg操作框- SvgText 复制、粘贴 * [√]程序化Svg图形 fg(Flag:string 标签)/adp(Adapter:number 适配模式id) 属性 * ~~程序化Svg图形 兼容其他Svg图像，并支持Transfrom及滤镜 ★~~ * [√]画布 dev右键菜单 * [√]SVG选中 dev右键菜单 * [√]程序化Svg图形 图层UI组件 * [√]程序化Svg图形 图层-逻辑同步 * [√]程序化Svg图形 图层-修改方法（上移 下移 置顶 置底） * [√]程序化Svg图形 图层-控制 显示、隐藏 * [√]程序化Svg图形 图层-上锁功能(上锁后 无法选中) * [√]程序化Svg图形 图层-自动缩略图 * [√]程序化Svg图形 图层-text样式名称 * [√]程序化Svg图形 图层-位图 样式名称 * [√]程序化Svg图形 图层-Svg图形 样式名称 * ~~程序化Svg图形 图层-多选拖动 ★~~ * ~~程序化Svg图形 图层-支持组合 ★~~ * ~~程序化Svg图形 图层-组合展开、折叠 ★~~ * ~~组合功能实现 ★~~ * ~~组合功能-组合体选中(上一次点中的是组合体，则再次点击且未移动，触发up时，选中组合体内部物体) ★~~ * [√]参考线-Page水平、垂直中线 吸附 * [√]参考线-Page左、上、右、下边缘 吸附 * [√]参考线-Svg水平、垂直中线 吸附 * [√]参考线-Svg左、上、右、下边缘 吸附 * [√]参考线-Svg中心重合 吸附 * [√]参考线-移动 吸附 * [√]参考线-放缩 吸附 * [√]画布-结构 PageComp 托管所有涉及到 世界-局部坐标转换 的方法 * [√]画布-镜头平移功能 * [√]画布-放大缩小功能 * [√]画布-修复 放缩率不为1时 选择框计算BUG * [√]画布-放大、缩小 功能-UI按键交互 * [√]画布-放大、缩小 功能-鼠标滚轮交互：Ctrl+鼠标滚轮（上：放大 下：缩小） * [√]画布-滚轮 功能-鼠标滚轮交互：Shift+鼠标滚轮 控制水平滚轮（上：镜头左移 下：镜头右移） * [√]画布-滚轮 功能-鼠标滚轮交互：鼠标滚轮 控制垂直滚轮（上：镜头上移 下：镜头下移） * [√]画布-滚轮 功能-鼠标滚轮交互：鼠标滚轮 按住 移动镜头(为了实现按住鼠标中键移动 修改了laya.core.js MyTODO) * [√]画布-修改画布尺寸 * [√]画布-API申请PageID * [√]画布-API上传画布数据 * [√]画布-API下载画布数据后更新画布 * [√]Cmd指令框架-操作命令结构化 * [√]去掉 RectCtrlComp._jsUI ，改为 coComp * [√]Editor 初始化流程调通 * [√]历史记录-基础及工艺架构 * [√]历史记录-撤回（与 CET.Editor 联动） * [√]历史记录-重做（与 CET.Editor 联动） * 历史记录-裁剪变换后 复原不对BUG ★★★ ←········ * [√]历史记录-特效不能还原BUG * [√]历史记录-修复 图片拖入 不受HistoryMgr管理的BUG * [√]历史记录-修复 进入编辑模式 历史记录会额外触发一次的BUG * [√]历史记录-Stack由Function 改为Object 以支持附加属性 * [√]历史记录-Dialog UI组件 * [√]历史记录-Dialog 刷操作名称 * [√]历史记录-Dialog 点击记录 实现多步1次性撤回 * [√]历史记录-Dialog 点击记录 实现多步1次性重做 * [√]历史记录-适配的SliderComp封装 * [√]历史记录-SliderComp Alpha 修改为 (1-x)*100 逻辑 * [√]历史记录-适配Text的SliderComp锁机制 * [√]历史记录-JoyStack封装 * [√]历史记录-以PageID存入本地缓存 * [√]历史记录-根据本地缓存 及 Api 数据版本判断 刷最晚的一个版本 * [√]历史记录-多次重复 ctrl+s 后 过滤未改动的提交 * [√]历史记录-修复 使用PageID远程加载的数据【撤回】【重做】无效的BUG * [√]调色板-基础交互逻辑 * [√]调色板-优化SliderComp交互逻辑，支持bindTranspa与bindA100 两种Alpha修改绑定方式 * [√]调色板-支持 Fill/Stroke 绑定 * [√]调色板-支持 Eff 绑定 * [√]调色板-支持 Gradient(渐变) 绑定 * [√]调色板-支持 Text 相关 绑定 * [√]调色板-封装颜色修改/透明度修改change及changed逻辑 * [√]调色板- ColorU.EyeDropperOpen() 取色器 * [√]调色板-修复 Text gEff sEff 报错BUG ★ * [√]鼠标相关的 独立成MouseU工具类 * [√]trRCUI、rangeCGEve等事件监听 * [√]修复 旋转交互 控制点图标的中心点算法BUG * [√]修复 SvgMImg 双击进入文本模式后 交互失效BUG * [√]修复 SvgText 多次切换后 div->.edtior 位置未更新BUG * [√]gEff sEff dEff gFill gFillAlpha sFill dFill gStroke gStrokeAlpha gStrokeWidth gStrokeDash sStroke dStroke 去掉rc参数，支持多rc * [√]gTextFill gTextStroke 返回值 纯色情况由 hex改为 Vec3 * * Svg图形 选中框 上部小工具栏 ★[UI-ZK] * Svg图形 选中框 上部小工具栏-填充颜色界面 ★[UI-ZK] * Svg图形 选中框 上部小工具栏-填充颜色界面-自定义颜色界面 ★[UI-ZK] * Svg图形 悬浮 右键菜单 ★[UI-ZK] * 非Svg图形 悬浮 右键菜单 ★[UI-ZK] * 形状菜单 ★★★[UI-ZK] * 裁剪为横纵比菜单 ★[UI-ZK] * Page 工作区域尺寸计算 ★★★[UI-ZK] * SVG图形-右键菜单-设置为背景（wh更改为page尺寸,xy归零,置底） ★★★[UI-ZK] * * [√]修复 Laya.Input组件 输入时不显示的BUG ★ * [√][ZK]程序化Svg图形 样式-外阴影设置正常，但是改变外阴影，角度反向 BUG * [√][ZK]程序化Svg图形 样式-内阴影与外阴影的互斥只能互斥一次，再一次切换内外阴影切换不了 BU * [√][ZK]程序化Svg图形 样式-阴影距离拉长后会有明显的边缘 BUG * [ZK]程序化Svg图形 样式-添加柔化边缘效果后，外阴影会消失。内阴影不会 BUG ☆ * [√][ZK]程序化Svg图形 文字-单行 右对齐 整行会消失 BUG * [√][ZK]程序化Svg图形 文字-加了左边距 居中对齐或者右对齐后 整行会靠右至消失 BUG * [√][ZK]程序化Svg图形 文字-文字的阴影，点击次数多了就会报错 BUG * [ZK]外阴影距离35以上，然后旋转角度会有白边 * [√][ZK]程序化Svg图形 需要在SVG里添加字段：高度、宽度、缩放高度、缩放宽度、水平垂直位置、角度等等 * [√][ZK]程序化Svg图形 点击复制后。继续对原物体进行操作，粘贴会是原物体最后的样子而不是原来的样子 * [√][ZK]程序化Svg图形 修复 复制后，原来是svgImg的纯图片，会被判定为svgObj的BUG * [ZK]不能重置图片，只能重置大小 * [√][ZK]程序化Svg图形 修复 无法导入两个同样的图片 BUG * [√][ZK]程序化Svg图形 修复 图片与图形不能删除/剪切 BUG * [√][ZK]程序化Svg图形 修复 保存与加载——原本判断为SVGimg的图片，保存再重新加载后，判断为SVGobj BUG * [√][ZK]SvgObj 删除报错BUG * [√][ZK]SvgObj 删除 SvgLayerOpt报错BUG * [√][ZK]历史记录-修复 撤回后 在 onChanged中执行cmd.gPctSC()会报错的BUG --- 报错及解决方案： 1、编译出现 This syntax requires an imported helper but module ‘tslib‘ cannot be found https://blog.csdn.net/lanuo/article/details/118417581 1、在项目目录下安装tslib npm --registry https://r.npm.taobao.org install tslib