醒也罢 梦也罢 人生苦短
autoarrow.js
写了个简单的 JavaScript,可以指定 HTML 页面上的一个元素作为 container,从里面的任意元素向里面某个图片的一个区域画箭头。名字就叫 autoarrow.js 吧,放在 github 上,点过去可以看到简介、截图,里面也有一个简单的例子。依赖 jQuery, 不过我不太熟悉怎么做成 jQuery 插件的形式,就这么凑合着吧。 Showcase 以下几篇文章可以作为演示 (如果你看不到可能是缓存问题,强制刷新一下) Book Stand AVIS国际租车体验 – 八达岭野生动物园 人体工学键盘+笔记本支架 大致原理 创建一个 canvas,位置、大小完全和 container 一致,但是 z-index 是负数,这样它就在 container 显示层的下面,设置 container 背景透明,所以能够看到 canvas 上的东西。如果 canvas 在 container 上面,则会影响 container 里的文字选择等操作。 因为图片一般是不透明的,所以把区域内的图片都设置 z-index 为更小的负数,但暂未考虑其它不透明元素。 计算出箭头起点区域和终点区域的坐标,用一种很简单的算法计算起点、终点到底从哪个方向画出来。这样在接口参数中,起点只需指定起点的元素,比如 $('#anchor-1') 这样的,终点只需指定图片和目标区域(一般是图片上的一个物体)。无需考虑排版变化之后需要重新“布线”的问题。 执行时机 使用这个脚本的时间问题。最初我选择在 jQuery 的 ready 事件中执行: $(function() { ... }); 随后发现在 Chrome 里,图片还没有加载就开始画线了,而如果这图片的大小是事先未知的,就不能事先指定其尺寸,图片加载完成会造成重新排版,就全乱了。 正好 jQuery 还提供了一个 .load 事件,这个可以在所有图像加载结束之后执行,正适合这个场合: $(window).load(function() { ... }); 如何方便地取得图片区域坐标 这只是一个小工具,如果想在动态程序中应用它,所需的额外工作还不少。比如怎么选定图片的一个区域,得到它的坐标并且保存起来,好在显示页面的时候使用?这方面的插件有很多,imgAreaSelect 就是很好用的一个。 ...