TEColor 插件 3.0.6 更新 支持导出色板为色卡图片

这个插件仅用于快速调节块的前景色和背景色,你可以使用它装饰你的笔记。

使用方式

与思源自身的块样式按钮基本一致,只是简单增加了一些快捷功能。

二次开发

这个插件的源代码全部位于插件文件夹中,你可以自行修改开发,注意遵守相关协议即可。

注意如果你制作了修改版本的插件,需要修改 plugin.json 中各个插件名字段,避免更新时被覆盖。

有关更新

由于浏览器的代码加载机制,更新插件之后可能需要==清除缓存并硬刷新,==否则可能出错。

主要功能

应用主题前景色

与思源原生前景色功能一致,不再赘述。

应用主题背景色

与思源原生背景色功能一致,不再赘述。

应用主题卡片颜色方案

与思源原生卡片样式功能一致

通过以上功能的实现,Markdown 卡片不仅能实现与思源笔记原生卡片样式一致的效果,还能提供更高的灵活性和可操作性,为用户带来更加便捷和高效的笔记体验。

image

应用主题颜色排列组合

为了更快速使用,这个插件直接将所有主题颜色方案可能实现的配色列出。

点击此处应用:

image

自定义颜色

image

调色盘可以实时选择颜色,① 处的两个按钮可以选择调整目标是背景色或者前景色。

image

这些按钮显示了所有具有颜色或者背景色属性的块,可以右键打开原始块所在的位置。

可以通过点击image图中这个按钮临时添加自定义配色,但是这些配色将在下次打开这个面板时被清除,因此建议使用块来保存配色方案。

清除块颜色

点击清除对应范围内块的颜色。

其中已经加载的块指界面上存在对应 DOM 块元素的块,可见块指已经加载且屏幕范围内可见的所有块,选中块指光标所在的块或者主动选择的所有块。

注意:为了方便颜色管理,此处==没有跳过嵌入块==

image

颜色判定

根据每个块的前景色自动判定并使用合适的前景色。

根据每个块的背景色自动判定并使用合适的背景色。

在支持颜色判定的色板中会有如图提示:

image

明度调整

默认的颜色判定算法是根据明度进行调整。

其他调整算法#todo#

后续支持设定调整算法。

智能颜色判定#todo#

使用 AI 调整块的颜色

色板和自定义色板

中国传统颜色

纯颜色系列,支持颜色判定

自定义色板

支持保存自定义色板,自定义色板保存在界面所在的设备而不是思源应用所安装的位置(经过仔细考虑之后我这样决定)。

如果你需要到处使用你的色板文件,可以尝试下面的导入导出文件选项。

导入 aco 文件

aco 文件是 Adobe Photoshop 和 Adobe Illustrator 等的颜色色板定义文件,你可以查找相关资料找到他们的位置(软件安装时就自带了一些色板,后缀名是.aco)

image

点击上面这个面板的文件夹按钮可以打开色板文件。

需要注意,==仅支持 RGB 格式==的色彩文件,例如你可以在这里找到 Material Design 的色板文件,使用导入功能之后就能够看到你的色彩定义了。

这个功能同样可以在这个网站的发布界面进行测试。

image

例如上面这个就是我下载的色板文件。

更完善的色板文件支持#todo#

这次的实现时间比较赶,之后会实现更加完善的.aco 文件支持。

下载色板

色板在调试完成之后可以下载下来相互交换。

这可能能够让你快点收集到想要的色彩。

下载的色板文件可以用于 photoshop 等软件中(当然你也可以使用它们的色彩资源)。

image

也可以参考少数派上的这篇文章,使用其他工具来制作色板。

创建自己的色板,适用于 PS/CSP/GIMP/Krita/Pencil2D 等软件 - 少数派 (sspai.com)

图像取色

支持从笔记内的图片提取颜色,可以使用这些图片进行尝试

壁纸 (826)01155-2066619281-cinematic photo chubby, powerful, futuristic, panda-inspired, mech suit, adorable, sturdy, cutting-edge technology, sleek design02357-2558285354-texture detailed floral print wallpaper design  , vibrant hibiscus with leaves,dark blue  background,illustrator, orange,white,bD5_场景 3 1_20240601_151930

目前支持的取色算法有:

取色算法

color-thief

使用 color-thief 库进行取色

kMeans-cosineSimilarityWithLightnessFix

带有明度调整的余弦距离聚类,适合需要提取更丰富颜色的情况

kMeans-euclideanDistance

简单 RGB 空间欧几里得距离聚类,适合提取少数集中色块

kMeans-euclideanDistanceHSV

HSV 空间的欧氏距离聚类,适合提取少数集中色块

MMCQ

使用 mmcq 算法,调用 mmcq.js 库实现

添加取色结果到自定义色板

在图片取色窗口的每种算法前都有一个小小的 + 号按钮,点击它可以将颜色添加到你想要的画板(目前只支持批量添加)。

image

注意色板的背景色,当你编辑时它的标题会有特殊的背景色。

image

这表示这个色板文件是当前定义的目标。

自定义取色算法#todo#

图片色彩提取部分将会移动到尚在进行中的 TEImageTools 插件中,届时将支持自定义取色算法。

导出取色色卡

取色的色卡可以导出为图片,导出效果如下方示例:

file-colors

file-colors

image

色卡生成器编写

所有的色卡使用 vue 渲染。

默认的色卡生成器位于:data\plugins\TEColors\source\UI\components\imageColorPanel\exportPreviewer\exportPreviewers

目录下。

如果你有编程技能可以帮助作者编写更多好看的生成器。

如果你需要去除色卡下方的水印,也需要编辑这些文件

image

另外可以在 /data/public/themeEditor/teColors/exportPreviewers/ 也可以放置你自己的渲染器文件,需要注意的是它们必须是 vue3 组件。

下面是一个简单的色卡图片生成器组件,你可以将它下载到相应位置进行尝试:

defualt.vue

生成器的编写需要一定的前端编程能力,建议如果没有相关经验不要强求,否则会很痛苦而且耽误记笔记

临时上传图片取色

图片色彩分析界面的图片容器可以拖放图片,拖放后将会自动以当前色彩配置进行分析,或者你也可以双击选择图片上传分析。

image

其他:

为了方便测试,发布界面上同样可以进行编辑修改,但修改结果==不会保存。==

可以在

TEColor 插件 - SiYuan - 思源笔记 v3.0.17 (ccsjhn.com)

进行尝试。

赞助我们

椽承设计正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22337 引用 • 89380 回帖
3 操作
leolee 在 2024-07-06 04:42:14 更新了该帖
leolee 在 2024-07-06 04:41:16 置顶了该帖
leolee 在 2024-07-06 04:36:06 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Adaxi

    很棒哦,终于可以预览到所有的标注效果了,作者辛苦了

  • 其他回帖
  • 收到 晚些尝试适配

  • sxdtzjs

    我目前经常遇到的一个问题是由于目前各个主题各有其优缺点,特别是遇到正在使用的主题有 bug 或不能满足当下的要求时不得不更换主题。

    但一换主题最大的麻烦来了,原来的颜色都变了,有时不得不再改,太麻烦了。

    各主题在设置颜色时应该遵循统一的规范,你可以有自己的特色,可以增加前景背景字体的颜色及样式,但在代码一致的情况下,各主题显示的颜色应一致。

  • chenhao396 1

    A329D2YN5RUW5475GA.png

    C3GI0BULIWCO5ZMMT.png

    这个主题有点问题

    1 回复
  • 查看全部回帖