jessyan0913 / pictode Goto Github PK
View Code? Open in Web Editor NEW🎨 Pictode最方便集成的绘图工具
Home Page: https://pictode.com/
License: MIT License
🎨 Pictode最方便集成的绘图工具
Home Page: https://pictode.com/
License: MIT License
问题描述 / Problem Description
虽然Konva.js天然支持多图层管理,但是目前Pictode并没有封装改功能。在实现图片编辑类工具时,多图层管理必不可少。
例如:实现编辑图片工具,需要将图片置于一个底部图层,然后可以再新建一个图层来绘制画笔等形状(类似PS的图层)。
解决方案描述 / Solution Description
封装Konva.js的Layer,在app中支持Layer的管理,主要功能有:Layer的增、删、移动和可见性切换
备选方案 / Alternative Solutions
附加上下文 / Additional Context
演示环境要求 / Demo Environment Requirement
技术实现建议 / Technical Implementation Suggestions
其他信息 / Additional Information
截图/图片 / Screenshots/Images
参考 / References
特性描述 / Feature Description
实现图形与图形之间绑定连线的功能,任意图形拖动时连线绑定关系不变
解决方案描述 / Solution Description
创建一个Line的自定义图形,该图形包含from和to两个属性,分别监听from和to的图形的拖拽事件,来更新line图形的形状.
从而实现视觉上图形连接的效果
技术实现建议 / Technical Implementation Suggestions
https://konvajs.org/docs/sandbox/Connected_Objects.html
截图/图片 / Screenshots/Images
参考 / References
**问题描述 **
导出后.pictode文件,再次导入该文件画板空白
复现步骤
期望行为
可以正常回显文件内容
**桌面设备信息 **
特性描述 / Feature Description
目前输入文本只能单行, 无法换行。不知是否实现
解决方案描述 / Solution Description
换行效果,参考https://excalidraw.com/
技术实现建议 / Technical Implementation Suggestions
如果还是输入框实现的文本输入, 那么文本测量确实是个问题。 我目前采用的是用浏览器测量法。 比较简单粗暴。 demo
似乎收到手机端不能使用
问题描述 / Describe the bug
[中文] 导入@pictode/vue-aide无法使用,找不到
复现步骤 / To Reproduce
[中文] 复现行为的步骤:
期望行为 / Expected behavior
[English] A clear and concise description of what you expected to happen.
[中文] 请清晰简明地描述您期望发生的行为。
问题描述 / Describe the bug
node在初次编辑缩放旋转时回退存在异常
复现步骤 / To Reproduce
期望行为 / Expected behavior
nod正常恢复到编辑前的node
特性描述 / Feature Description
2D可视化组态软件,集动态数据显示和事件交互于一体的可视化工具
解决方案描述 / Solution Description
技术实现建议 / Technical Implementation Suggestions
参考 / References
https://2d.le5le.com/
特性描述 / Feature Description
标尺功能是设计软件常见的一个功能,用于辅助图形定位等
截图/图片 / Screenshots/Images
参考 / References
问题描述 / Describe the bug
正常情况,在新建画布中选中图形元素时,出现的矩形框层级是最高的,但是重新导入之前保存到本地的文件, 再选中元素时的矩形框层级出现问题
复现步骤 / To Reproduce
1、在空白花白中随便画几个图形元素,为了方便观察,几个元素最好有重叠,然后点击 菜单 -> 保存到本地
, 假设自动下载的文件名为 xxx.pictode
2、点击 菜单 -> 打开
重新加载刚才保存的 xxx.pictode
文件
3、选中一个图形元素后,出现选中的矩形框
4、你会发现矩形框的层级不在最上层了
5、排查源码发现是导入时 optionLayer 层级初始化问题
期望行为 / Expected behavior
重新导入已保存的文件,重新渲染元素,选中元素后,矩形框层级正常展示
特性描述 / Feature Description
当用Line或者自由画笔绘制图形时,创建图形后,通过编辑关键点实现图形的二次编辑
解决方案描述 / Solution Description
line
图形中包含一个points
属性,这个属性记录了line
图形的关键点位置,通过修改points
即可完成关键点编辑功能
技术实现建议 / Technical Implementation Suggestions
在@pictode/plugin-selector
中支持该功能,将其作为默认功能实现
截图/图片 / Screenshots/Images
参考 / References
问题描述 / Problem Description
需要导出svg,插入到富文本编辑器中展现。并且能从编辑器打开svg再次编辑
问题描述 / Problem Description
添加HTML渲染,以实现tldraw的makereal的效果:https://github.com/tldraw/make-real-starter
问题描述 / Describe the bug
文本输入框,按下backspace不能够删除已经输入的文字
复现步骤 / To Reproduce
点击文本框功能,输入几个文字,按下backspace发现不能删除文字
期望行为 / Expected behavior
点击文本框功能,输入几个文字,按下backspace可以删除已经输入的文字
截图 / Screenshots
桌面设备信息 / Desktop (please complete the following information):
移动设备信息 / Smartphone (please complete the following information):
附加上下文 / Additional context
特性描述 / Feature Description
增加背景相关的设置,支持画布拖拽时背景跟随画布移动/缩放,视觉上像是画布无限
截图/图片 / Screenshots/Images
参考 / References
https://longviewcoder.com/2024/03/13/konva-infinite-background/
问题描述 / Describe the bug
暗黑模式橡皮擦不明显
复现步骤 / To Reproduce
切换暗黑模式,点击橡皮擦
期望行为 / Expected behavior
暗黑模式下橡皮擦颜色为白色比较合理
截图 / Screenshots
桌面设备信息 / Desktop (please complete the following information):
移动设备信息 / Smartphone (please complete the following information):
附加上下文 / Additional context
问题描述 / Describe the bug
放大缩小的时候是基于左上角,而不是中心
问题描述 / Describe the bug
图形成组后移动组,再解除成组后,成组图形恢复原位。理想情况应该是原地解除组合。
复现步骤 / To Reproduce
期望行为 / Expected behavior
截图 / Screenshots
桌面设备信息 / Desktop (please complete the following information):
移动设备信息 / Smartphone (please complete the following information):
附加上下文 / Additional context
Bug Report / 缺陷报告
问题描述 / Describe the bug
放大画布后,所有的图形在修改属性时会导致图形不断放大
复现步骤 / To Reproduce
期望行为 / Expected behavior
不会放大缩小
截图 / Screenshots
应该是polyfill下node.ts的toObject改写了 attrs的属性转化为了绝对值,所以重新设置后位置大小变化。修改后恢复正常,但是我不确定你转化它们的意图是什么
问题描述 / Describe the bug
[中文] 文本编辑时看不到光标
[中文] 复现行为的步骤:
期望行为 / Expected behavior
[中文] pictode创建输入框使用了一个absolute的textarea,但是没有设置zIndex,当在弹窗中打开pcitode时,弹窗的div挡住了textarea。希望配置增加个zindex,并有默认值
特性描述 / Feature Description
实际使用中的并不需要鼠标中键进行拖拽的功能
解决方案描述 / Solution Description
希望拖拽功能可以按需灵活使用或者禁止掉
问题描述 / Problem Description
工具集中缺少箭头工具
解决方案描述 / Solution Description
实现Pictode的Tool接口,再结合Konva.js自带的箭头工具即可实现
参考 / References
Konva.js的基础图形中包含箭头图形
问题描述 / Describe the bug
无法打开保存有图片的文件
复现步骤 / To Reproduce
视频附件很详细
期望行为 / Expected behavior
打开保存有图片的文件
截图 / Screenshots
桌面设备信息 / Desktop (please complete the following information):
移动设备信息 / Smartphone (please complete the following information):
附加上下文 / Additional context
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.