Claude-Code 使用体验

背景

随着 AI Agent 的发展，一批工具随之大火，如 OpenCode、CodeX、Claude Code、OpenClaw 等，极大提升了开发效率，同时也重塑了传统开发流程。

近期抽了些时间简单体验了 AI Agent 开发工具，并基于 Claude Code 和几个国产模型在 Web 开发上做了一些简单测试，这里做个分享。

基于AI调整图标细节

在AI生成图标可用性调研中简单调研了国内外一些支持生成图像的AI在生成图标场景上的应用，结论为大多数模型直出的图标大多数处在基本可用和基本不可用之间，本文尝试基于上文中生成的图标进行二次微调在其中选择一个将其调整为可用状态。

调整思路

本文选择下图中的图标作为基底

混合这个图标的边框，字体和配色设计

要基于文字明确显示【别点广告】的主题，以及显示一个大大的广告，和一个隐藏起来的绿色的【下一关】按钮，手指放在下一关的按钮上。

模型表现

这里选择在前文中表现较好的几个模型。

请帮我生成一个图标，主体设计请参考图片1，要基于文字明确显示【别点广告】的主题，以及显示一个大大的广告，和一个隐藏起来的绿色的【下一关】按钮，手指放在下一关的按钮上。边框、字体、配色设计请参考图片2。生成的图像像素应该为144*144。

星流

AI生成图标可用性调研

一个简单的背景，要为一个名为【不要点广告】的微信小游戏生成一个图标。这里简单调研一下各大AI的可用性。

国内版

国内版所用提示词如下：

请帮我生成144px*144px的图标10个，用于表示一个微信小游戏【别点广告】（一个休闲益智小游戏，避免点击广告，准确进入下一个关）的小程序头像。在这10个图标中选出你最推荐的一个并说明理由。

请帮我生成一个144px*144px的图标，用于表示一个微信小游戏【别点广告】（一个休闲益智小游戏，避免点击广告，准确进入下一个关）的小程序头像。

文心 4.5 Turbo

生成的图标完全不可用，且并没有理解10个的概念，将描述改为10个144px*144px的图标仍然不行，仅支持根据描述生成单幅图片。并不支持真正意义上的文本+图片的组合生成模式。

背景

本文简析词云（wordcloud）的源码。

布局算法

1. 初始化：设置画布大小、背景色、网格大小等。
2. 词处理：每个词根据其重要性（频率、权重等）被赋予一个大小。
3. 位置选择：算法在画布上为每个词寻找合适的位置。这通常通过在画布中心开始，并向外螺旋（或其他形状，如圆形、星形等）搜索空间来实现。
4. 碰撞检测：在放置每个词时，算法会检查该位置是否会与已放置的词重叠。这通常通过一个网格来实现，网格记录了画布上的哪些区域是空的，哪些已被占用。
5. 绘制：一旦找到空间，词就会在画布上绘制出来，并更新网格状态。
6. 迭代：重复上述过程，直到所有词都被尝试放置。

核心方法

• weightFactor 和 shape 函数用于计算词的大小和布局形状。
• getPointsAtRadius 函数计算给定半径上的点，这些点可能是词云中词的候选放置位置。
• getTextInfo 函数计算单个词的布局信息，如大小和旋转。
• canFitText 检查一个词是否可以放在特定位置而不覆盖已有的词。
• drawText 将文本实际绘制到canvas上。
• updateGrid 更新网格状态，标记已被占用的区域。

背景

pixelmatch是一个JavaScript像素级图像比较库,最初创建是为了比较测试中的屏幕截图。具有准确的抗锯齿像素检测和感知色差指标。非常小（大约有 150 行代码）可以在浏览器和nodejs中运行。

本文简析pixelmatch的工作过程及原理。

本文简述G2如何实现点击图例联动数据筛选。

这里回答三个问题

1. 实现图例联动数据筛选的核心逻辑。
2. 如何隐藏/移除数据。
3. 如何显示/新增数据。

结论

实现图例联动数据筛选的核心逻辑

1. 点击图例图元后触发了legend:filter事件。
2. legend模块相应了legend:filter事件，根据图例的筛选状态执行了filter方法。
3. 在filter中根据上下文实例context获取了图表的marks。忽略了legends``marks对其他marks修改了其transform和scale。

如何隐藏/移除/显示/新增数据

由于filter操作本质上是在修改marks修改了其transform和scale, 并没有涉及数据的移除和添加，所以隐藏/显示逻辑其实并无区别。

本文简述ECharts如何实现点击图例联动数据筛选。

这里回答三个问题

1. 实现图例联动数据筛选的核心逻辑。
2. 如何隐藏/移除数据。
3. 如何显示/新增数据。

结论

实现图例联动数据筛选的核心逻辑

1. 点击图例后触发了legendAction同时触发整个图表的update。
2. 在图表真正执行update之前执行了restoreData方法以恢复最原始的默认数据。
3. 图表的update任务中执行了legendFilter。
4. legendFilter中根据自身属性对series做了filter。

如何隐藏/移除数据

在步骤4中对要渲染的series做了过滤仅渲染需要渲染的series。

如何显示/新增数据

在步骤2中恢复了整个图表最原始的默认数据。

图表引擎调研-特点与发展发向

背景

本文将描述对一些著名的图表引擎的调研结果。以期对图表引擎的开发做出一些方向性的指导。

图表引擎调研-编辑器接入

本文主要调研一些开源的底层图表库，评估其易用性、灵活性、可定制性、以及接入charts-studio的难易程度。目的是评估图表工具的底层引擎是是否需要更换，能否为图表工具选择一个灵活且高效的底层引擎。

项目详情见：chart-lib-learn

版本：V6.0.0

背景

本文将简述ECharts如何实现标签自动旋转特定角度以解决柱状图或折线图轴线标签重叠的问题。

结论

解决问题的流程如下：

1. 首先定义了几个候选的旋转角度[0，25，45，70，90]。
2. 获取最长的label并根据最长的label的 size计算每一个候选的旋转角度下的size（详情见：https://codepen.io/agurtovoy/pen/WNPyqWx）
   1. 其中width下图中的横向绿线部分即和轴交叉的部分。
   2. 其中height为下图中红框高度。
3. 将步骤2的size和图表中的间隔做比对，横向图width做比对纵向图height做比对。看最大label的交叉长度需要几个单位间隔的宽度来装。这个值即为label的间隔个数。
4. 计算所有的候选角度所需要的间隔数，选择所需间隔最少且其中角度最小作为自适应的结果。