Youth

Results 9 issues of Youth

有这样一个需求,顶部的tab不能点击,类似于UIPageControl的作用。但是奈何UIPageControl的样式过于单一,JXSegmentedView又没有禁用tab点击的属性。有没有什么更好的方法嘛?

question

## 推荐项目 - 项目地址:https://github.com/JessYan0913/pictode - 类别:JS - 项目标题:Pictode-最方便集成的绘图编辑器 - 项目描述: Pictode是一个基于Konva.js开发的绘图编辑器框架,具备流畅的交互体验,面向开发者提供友好的集成方式和可扩展特点。 也许你已经在网上看到许多技术大咖分享如何实现画板或图片编辑器的方法。他们或许详细解释了编辑器的原理和代码实现,有些甚至直接使用原生Canvas构建编辑器。但你是否和我有相同的感受? 我们既敬佩技术大咖,又感到自己阅读后除了感叹:“🐮🍺!”外收获很少。原因在于我们无法将他们的代码应用到项目中。虽然阅读、点赞和收藏了这些文章,但仍感头脑空空,实际收获有限。 **把图形编辑器嵌入自己的项目,有时真麻烦**。比如,编辑器用React构建,你的项目用Vue;或者编辑器不够灵活。 Pictode就是你的救星,像🚀一样,解决这些问题,让你事半功倍。 - 亮点:基于Konva.js库、方便集成、可自定义工具、可自定义插件、与UI框架无关 - 示例代码: **Pictode** offers various plugins to cater to diverse needs. [![Edit pictode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/pictode-playground-7rm8zq?file=%2Fsrc%2FApp.vue%3A1%2C1)...

- 项目名称:Pictode - 项目地址:https://github.com/JessYan0913/pictode - 项目简介 (**100** 字以内):Pictode是一个基于Konva.js开发的绘图编辑器框架,具备流畅的交互体验,面向开发者提供友好的集成方式和高扩展性的特点。 - 项目截图 (**6**张以内): 绘图 ![1](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bce6230c53464d1fb917a31c5e1f33c2~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=1054&s=2552077&e=gif&f=629&b=fbfafd) 选择/变换 ![2](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba3f895b05df45fb9f0dd6d2b2db156e~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=1054&s=4638118&e=gif&f=541&b=fbfafd) 层级移动 ![3](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/383d7a20fac54211a98f98483d32b2f5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=1054&s=2589032&e=gif&f=381&b=fdfdfd) 对齐/分布 ![4](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13b932bad0fa4e5eb63d686b4cfeeebc~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=1054&s=4036578&e=gif&f=540&b=fdfdfd) 组合/解除组合 ![5](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a2457f650a3424d9b5fa8fc39dd66c3~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=1054&s=3576961&e=gif&f=530&b=fdfdfd)

## 推荐项目 - 项目地址:https://github.com/JessYan0913/pictode - 类别:JS - 项目标题:Pictode-最方便集成的绘图编辑器 - 项目描述: Pictode是一个基于Konva.js开发的绘图编辑器框架,具备流畅的交互体验,面向开发者提供友好的集成方式和可扩展特点。 也许你已经在网上看到许多技术大咖分享如何实现画板或图片编辑器的方法。他们或许详细解释了编辑器的原理和代码实现,有些甚至直接使用原生Canvas构建编辑器。但你是否和我有相同的感受? 我们既敬佩技术大咖,又感到自己阅读后除了感叹:“🐮🍺!”外收获很少。原因在于我们无法将他们的代码应用到项目中。虽然阅读、点赞和收藏了这些文章,但仍感头脑空空,实际收获有限。 **把图形编辑器嵌入自己的项目,有时真麻烦**。比如,编辑器用React构建,你的项目用Vue;或者编辑器不够灵活。 Pictode就是你的救星,像🚀一样,解决这些问题,让你事半功倍。 - 亮点:基于Konva.js库、方便集成、可自定义工具、可自定义插件、与UI框架无关 - 示例代码: **Pictode** offers various plugins to cater to diverse needs. [![Edit pictode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/pictode-playground-7rm8zq?file=%2Fsrc%2FApp.vue%3A1%2C1)...

我开源了一个基于Konva.js的绘图编辑器框架——Pictode,支持自定义图形工具和功能插件,可以快速搭建Konva.js的白板、图片编辑器、图像标注、涂鸦等应用,支持选择器插件、历史记录插件、对齐插件等等,欢迎大家使用 掘金:https://juejin.cn/post/7286307632193142843?searchId=20231027095741D588E68165C92B84F836 GitHub: https://github.com/JessYan0913/pictode

I want to use it with vite-plugin-federation, but I found that vite-plugin-dynamic-import cannot be resolved. vite.config.js ```ts plugins: [ vue(), dynamicImport(), federation({ name: 'edoms-runtime', remotes: { 'remote-ui': 'http://localhost:8001/assets/remoteEntry.js', }, shared:...

### Feature Request / 功能请求 **特性描述 / Feature Description** 实现图形与图形之间绑定连线的功能,任意图形拖动时连线绑定关系不变 **解决方案描述 / Solution Description** 创建一个Line的自定义图形,该图形包含from和to两个属性,分别监听from和to的图形的拖拽事件,来更新line图形的形状. 从而实现视觉上图形连接的效果 **技术实现建议 / Technical Implementation Suggestions** https://konvajs.org/docs/sandbox/Connected_Objects.html **截图/图片 / Screenshots/Images** ![连线](https://github.com/JessYan0913/pictode/assets/52144974/762eaa4b-9243-4b2c-9aeb-8634f905aaf3) **参考 / References** ###...

good first issue

### Feature Request / 功能请求 **问题描述 / Problem Description** 鼠标移动的方式裁剪画布大小,类似于微信的PC端的截图功能 **解决方案描述 / Solution Description** 基于Konva的矩形图形,根据鼠标的移动改变裁剪的区域大小。点击确定后,将矩形的尺寸应用到画布即可。裁剪工具自带,确认和取消按钮,或提供确认和取消的方法

### Feature Request / 功能请求 **问题描述 / Problem Description** 虽然Konva.js天然支持多图层管理,但是目前Pictode并没有封装改功能。在实现图片编辑类工具时,多图层管理必不可少。 例如:实现编辑图片工具,需要将图片置于一个底部图层,然后可以再新建一个图层来绘制画笔等形状(类似PS的图层)。 **解决方案描述 / Solution Description** 封装Konva.js的Layer,在app中支持Layer的管理,主要功能有:Layer的增、删、移动和可见性切换 **备选方案 / Alternative Solutions** **附加上下文 / Additional Context** **演示环境要求 / Demo Environment Requirement** **技术实现建议...