hoodlum1980 [ 发发 ] 的技术博客

主力语言:C / C++,ASM(汇编),C#,Python。非主力语言:Java。

博客园 首页 新随笔 联系 订阅 管理

    经过长达 N 个月的等待,我终于决定发布此该 Photoshop 滤镜,实际上该滤镜的主要算法和 UI 交互是在 2012 年 8 月大致开发成型,2012年11或者12月份经历一次代码的稳定,修复了一些隐藏的不易察觉的 bug,基本功能已经在此时全部完成。由于去年同时忙于工作上的其他开发任务,导致该滤镜(我的业余时间产品)一直压在手里没能立即发布,一个主要原因是大概想换个思路,做成免费试用但是也可以有注册版本的。因此这使得它的发布周期大大延长。

    该滤镜的主要用途是协助用户在 Photoshop 中绘制表格。或许有人会说,这个任务 PS 有很多种方法可以完成,例如一些重复性操作,例如可以先对 Excel 截图,再复制粘贴到 PS 里。问题是这些都需要比较繁琐的手工操作,在多个软件,多个界面之间不断切换。工作成果不容易积累,当你下次再次绘制表格时,你发现依然要花上一些精力,尤其是要精确的控制每一行距离要相等,不借用网格线的话就没法完成,而网格线又要根据不同需求和文档时刻修改设置。久而久之让人对此感到头痛。这正是让人感觉疲惫的所在(这也是为什么编程开发是一个很累的工作)。而如果你始终把注意力集中在一个软件里面,这样工作量会感觉轻松很多。

    由于 PS 是以位图处理为核心和优势,而不可避免的它在矢量图等一些方面不如其他专注矢量图的软件哪么得心应手。这个滤镜的需求实际上在我刚接触 PS 插件开发的早期就形成了这样的一个想法,我认为扩展 PS 的这个功能是非常自然的,而且对于计算机来说应该是比较容易的。但那时候有一些地方没想明白,因为 PS 是位图为核心的,因此一个滤镜的输出通常是位图,这和矢量图那种数学描述是格格不入的。因此带来一个很大的挑战就是,所有的对最终结果的控制都必须在用户界面这一步一次性设置完成,而事后是不能“调整和修改”的。因此尽管绘制表格这个任务相对简单,但这里的用户界面是非常复杂和困难的(截至发布,仅负责接收用户设置参数的该 UI 对话框由超过 3500 行 C++代码实现,比滤镜核心算法代码量更多),例如,如何让用户能够个性化的调整表格的各个行列尺寸,以及是否在 UI 界面上由用户去编辑文字(这个需求经过我和一个同事 danchen 的交流,因为没有必要,另外实现起来颇为困难,而被舍弃了)。

    在 2012 年我和我的一位搞设计的同事 danchen 偶然谈起说我有这样一个想法,当即得到她的支持。她并因此为我提供了 UI 界面的一个粗略设计稿,尽管我觉得她的设计思路和实现思路有点距离,但最终界面是非常接近她的设计的。例如,界面中的三角形箭头拖动(手柄)等元素都是来自与该设计草稿。早期的界面是没有缩略图显示的,只有一些文本框,组合框来输入参数,用户可以手工计算行列的像素数,来输入,但这很不直观。最终我决定实现这一个非常有难度的设计,就是提供缩略图和缩放,拖动等操作。当然,这的确是非常具有挑战性的工作,是我做过的最复杂的 UI 之一。很多消息处理都非常复杂,尤其是鼠标消息。因为界面上可以点击,拖动的元素非常多。最终界面如下图所示:

 

    

    

    在对表格的尺寸控制上,采用了非常灵活的设计。例如,可以由手工拖动界面上的三角形箭头来改变表格的布局。同时也可以在界面上输入精确到像素的数字。例如,每列宽度,如果只提供前几列的数字,则剩余列会被剩余宽度均分。

    注意:

    (1)表格模型:表格边框是外扩的(在表格外部,类似PS里描边时的外部),中间表格线是尽量以数学意义上的无宽度线为中线的。因此:

    表格尺寸=行/列尺寸总和 + 边框宽度 * 2;(具体模型参考后面的图)。

    (2)绘制表格的建议步骤如下:不建议在当前已有图案图层中直接绘制,因为这会覆盖原来的像素。建议方法是新建一个空图层,然后用菜单:滤镜-hoodlum1980-drawtable调用滤镜,这样可以绘制在一个新图层,也可以设置像素透明度。(如果在无 transparent 通道的图层上绘制时,透明度参数被忽略)

 

    (3)点击标题栏问号按钮,然后点击界面上的控件,可以看到相关功能提示(如果有)。(这一点非常重要,因为我时间有限,来不及为它制作用户文档,所以这个功能可以帮助用户理解软件的各个 UI 交互细节的设计者用意和使用方法。)

 

    (4)注册版最多可以绘制 100 * 100 (后续版本可考虑增加到更多)行列的表格,试用版限制为 10 * 10。界面上的三角形箭头(grips)最多大概为 12 或 20 个。

    (5)界面上的颜色小方块,单一数字文本框都可以用鼠标操作。例如,点击或者拖动文本框前面的 label 修改其数字。

    以下是比较重要的表格布局功能:

    (6)点击每行/列尺寸右侧的带有红色X的小按钮,可以取消尺寸个性化设置,让表格均分宽度或高度(所有行/列尺寸相同)。

    (7)表格居中按钮的作用是让表格相对于文档(实际是 filterRect “滤镜矩形”,在没有任何选区的情况下,滤镜矩形等同于文档矩形)中居中。

    (8)拖动最左上方的三角形抓手,调整表格在文档中的位置。拖动最右下方的三角形抓手,调整的是表格的宽度(以及最后一个行列的尺寸),拖动中间的三角形,调整的是相邻两行/列的尺寸(表格整体宽度高度不变)。

    (9)每行每列尺寸可以仅提供前面几项的尺寸,剩余的行和列将用剩余的表格宽度/高度均分。(除非已提供的数据总和已经超出表格总宽度/高度)。点击“更新缩略图”按钮,以让缩略图更新那些没有立即做出回馈的参数变更。

    如果要计算精确到像素,就必须了解滤镜采用的表格模型,如下图所示:

 

    

     可见当前表格模型采用的是边框位于“表格外部”包裹的模型,未来版本考虑增加边框在表格边界线上居中,边框位于表格内部的配置。

    下载链接:(是一个合集,里面也包括了 ICO 插件等我开发的其他插件,适用于 Photoshop 32-bit)

    PsPlugIns_V2013.zip  备注:这是旧的版本(唯一好处是自带安装工具),强烈建议下载下方的链接(需手工复制安装)。

 

    ----(2016年7月6日 补充)----[begin]

    对于 Photoshop 64-bit,请下载 DrawTable 滤镜的 64 位版本(适用于 32 位操作系统的插件也同时提供):

    DrawTable_X64_20160707.zip (首次发布的版本,有 BUG,建议下载最新版)

    DrawTable_v104_20190703.zip (x86 和 x64 同时提供,修复了绘制边框时,在特殊情况下,边框没有被绘制的 BUG。增加对 16 位,32 位通道的图像模式的支持)

    -------------------------------[end]

 

    压缩包内,有一个EXE文件,可以帮助用户简化安装插件的操作。压缩包内另有两个 DrawTable 插件可以加载的表格配色文件,来自于 Office Excel 2007,这使得 Photoshop 可以绘制出类似 Excel 中的表格。安装后可以在 Photoshop 软件中使用以下两个菜单:

 

    (1)滤镜 - hoodlum1980 - DrawTable ;调用滤镜。

    (2)帮助 - 关于增效工具 - DrawTable... ;可以看到本滤镜的关于对话框。

 

    2013 年 5 月 12 日。

 

    开发时的草稿(缩略图模型和表格模型):

    

 

    

    更新历史:

    (1)修复特征码代码 BUG。2013年5月14日。

    (2)修复参数对话框右下角“我的博客”链接在 WIN7 系统下显示不完整的问题。2013 年 5 月 17 日。

    (3)缩短序列号长度,版本号变更到 1.0.2。2013 年 5 月 21 日。

    (4)细微调整序列号字符内容。2013 年 7 月 9 日。

    (5)修正一个与功能无关的极其微小的 BUG(位于关于对话框)。2014 年 6 月 28 日。

    (6)修正一下两处细节的不完善,光标形状的设置;拖动缩略图时的显示。细微修改了滑动光标(当鼠标位于 “不透明度” 标签的范围内时)的外观。2015 年 2 月 6 日 22:25。

    (7)同步提供 x86 / x64 版本插件。修复个别情况下,边框未绘制的 BUG。增加对每通道 16 位,32 位图像格式的支持。2019-07。

posted on 2013-05-12 09:43  hoodlum1980  阅读(13834)  评论(25编辑  收藏  举报