AJAX框架 jMaki (二) – 鱼眼(FishEye)实例

原创 2007年09月13日 15:47:00

下面给出一个鱼眼(FishEye)的例子。FishEye的效果如同放大镜,当鼠标在图像上滑动的时候,图像会放大或者缩小。


(一netBeans中实现鱼眼(FishEye)的步骤:


1. NetBeans 菜单”文件”-”新建项目”.在出现的”新建项目”窗口中,”类别”选择”Web”, 项目选择”Web应用程序”.点击”下一步”

2. 在”新建项目窗口中”, “项目名称”中输入”jMakiFishEye”项目. 点击”下一步”


3. 在”框架”窗口中,选择”jMaki Ajax Framework” . 点击”完成”.



4. NetBeans 中出现 jMakiFishEye 项目的同时,也会出现在”组件面板”中出现jMakiWidgets, 包括Dojo, Flickr, Google, Yahoo等中的一些Widgets. 如果没有出现”组件面板”, 选择菜单”窗口”-> “组件面板”.


  1. netBeans, 用鼠标直接把”jMaki Dojo”下的Fish Eye List拖到 jMakiFishEye 项目中的index.jsp文件中. 这个例子中放在<div class="content">中.


6. 托拽的结果是在index.jsp中加入了一些代码, 一行是导入了jMakitaglib, 一个是创建了FishEye widget实例.

 



7. 这个例子中缺省配置的几幅图像是参与开发jMaki的工程师头像,下面我要把这几幅图像替换为duke. jMakiFishEye项目的web目录下创建images 目录,拷贝几幅duke图像,修改index.jspFishEye的代码如下:







8. 运行结果如下:




9. 这个FishEye的效果是水平方向的,如果想改成垂直方向, 打开jMakiFishEye下的index.jsp, 鼠标右键点击FishEyeWidget代码段, 可以看到”jMaki”菜单, 是用来对jMakiWidget做外观配置的窗口. 出现的”dojo.fisheye Customizer”窗口中,修改”orientation”中的值为”Vertical”.




10. 再运行jMakiFishEye的结果如下:




JMakiFishEye的实现也包括两部分.客户端和服务器端.

客户端内容在 jMakiFishEye 项目的Web/Resource/dojo/fisheye, 包括四个文件

  • images/dojo-fisheye.jpg: 缺省图像背景

  • component.htm: 模板

  • component.js:这个JavaScritp 文件定义了Fisheye的操作

  • widget.json: 这个文件提供了访问Fisheye的接口


服务器端是两个jar文件, 主要是实现了前面介绍的jMaki Server RuntimeXmlHttpProxy

  • ajax-wrapper-comp.jar:

  • rss.jar:


下图列出了fisheye Widget有关的文件





(二)jMaki中的”发布/订阅机制”(publish/subscribe machnism)介绍


其它应用程序如果要使用jMaki中的 Widget, 需要遵循jMaki的”发布/订阅机制”(publich/subscribe machnism). 下面给出一个应用FishEye的实例, 来说明如何实现”发布/订阅机制”(publich/subscribe machnism)这个FishEye实例会在点击FishEye图标时 在页面的某个位置显示当前点击的图像已经图像的详细信息


第一步, Widget 需要发布(publish)一个主题(Topic)


按照需求, 应用程序需要知道FishEye中哪一个图标被选中, 因此需要修改component.js中和Click有关的代码.黑体部分代码是在图标的onClick函数中发布(publish)了这个topic, (“/dojo/fisheye”).参数this指当前的图标,包含所有的图标的相关信息,比如src, caption, index等等.



第二步, 应用程序订阅(subscribe)这个主题


Fisheye缺省的点击动作会弹出一个 JavaScript窗口,内容为"glue.js : fisheye event",现在我们不需要这个弹出窗口,可以在 glue.js中找到handleFisheye代码, 注释掉”alert”部分


应用程序订阅(subscribe)主题需要做两件事:

  • 调用jmaki.subscribe方法,参数为topic名称和listener方法

  • 完成listener方法,用以响应onClick事件(publish这个topic的事件)


修改index.jsp, 加入两段代码.一段是在左侧栏中加入"<div id="image_detail"></div>",用来显示点击FishEye中图标的结果(黑体字是新加入部分)


一段是JavaScript 代码,调用subscribe方法和完成listener方法. 这段Script代码要放在Fisheye Widget代码之后.



运行结果如下, 点击FishEye中的某个图标后,在左侧栏中显示对应图像以及图像的详细信息:




 

利用OpenCV3进行鱼眼镜头标定

利用OpenCV3进行鱼眼镜头标定   OpenCV3.0 alpha在8月21日发布,其中增加了鱼眼镜头模型,提供了标定、去畸变等一系列api,其实现方法参考了{Camera Calibrati...
  • u013035197
  • u013035197
  • 2016年01月11日 16:03
  • 3425

【opencv3.0】鱼眼图像畸变校正——标定校正 17/11/14更新代码

前两天发表的时候没注意,代码出了点错误,所以修改了一下,重新发上来。 参考: http://docs.opencv.org/3.0.0/db/d58/group__calib3d__fisheye...
  • qq_15947787
  • qq_15947787
  • 2016年05月18日 08:53
  • 22055

基于opencv的鱼眼矫正法-棋盘标定

这篇文章主要谈论了基于opencv的棋盘标定法的鱼眼矫正步骤。 这篇文章主要参考博客:棋盘标定。感谢博主。 主要矫正函数:opencv:fisheye序言棋盘标定法需要预先求得内参矩阵和畸变矩阵...
  • neu_chenguangq
  • neu_chenguangq
  • 2016年12月04日 15:34
  • 2137

Shader学习历程(四)——Unity官方Image effect__Fisheye

前面有时很想自己做一些很酷炫的image effect,但又不知道要从何开始,不妨先学习学习官方的Image effect是怎么实现的。这一篇主要探究鱼眼效果是如何实现的。下附两幅图看看效果是啥样的:...
  • AbstractSky
  • AbstractSky
  • 2015年11月23日 23:36
  • 2601

鱼眼校正之类1

圆形鱼眼校正之类1
  • Real_Myth
  • Real_Myth
  • 2016年12月19日 15:06
  • 1280

全景图片(鱼眼)的平面映射矫正

最近做了一个全景图片平面映射的工作,就是将一个360度的全景球面照片映射到一个平面上,使之看上去没有变形。由于网上的一些鱼眼照片的校正程序不好用,自己通过球体的三角计算,找到了映射效果较好的方法。写博...
  • gaoleikidkidkid
  • gaoleikidkidkid
  • 2014年03月26日 11:47
  • 8339

鱼眼镜头图像畸变矫正(fish eye distortion)

python 实现的鱼眼镜头畸变校正程序 fisheye distortion
  • smallflyingpig
  • smallflyingpig
  • 2017年02月23日 23:13
  • 3004

【opencv】鱼眼图像畸变校正——双经度法

参考:基于双经度模型的鱼眼图像畸变矫正方法_魏利胜 注意:原文中公式14,15,17,18,22,23有误,均未考虑符号问题。双经度法适用与视场接近180°以及小于180°情况#include"cv...
  • qq_15947787
  • qq_15947787
  • 2016年05月18日 09:10
  • 8525

鱼眼图片转化位全景图片的软件以及鱼眼矫正方法

要做全景视图,当然先要找一张全景图片(360°鱼眼镜头的)   接着全景视图的转换软件,如果可以的话自己做也行。  这里推荐 pano2VR        ...
  • jaccen
  • jaccen
  • 2017年06月13日 10:22
  • 2481

关于鱼眼镜头展图开的一些研究

前言:前段时间在做鱼眼展开的的程序,本来以为超简单,毕竟好多人都已经做过了不是,肯定有许多资料和参考。然而,做什么事情之前都不能眼高手低。我做了好久,还得不出想要的结果,是很烦。前两天导师没办法了给我...
  • yaoweijiao
  • yaoweijiao
  • 2017年03月01日 16:03
  • 3645
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX框架 jMaki (二) – 鱼眼(FishEye)实例
举报原因:
原因补充:

(最多只允许输入30个字)