我花了几天时间来写这个低效率绘图库(求优化),现在已经提交到GitHub上了,目前在鼠标定位方面还稍微有点偏差,希望有空的码农稍微帮一下忙(发布前检查的时候还是好的呢இ௰இ,so sad)。
这是初代版,即可以用但是功能还不是很完善。
这里有一个DEMO(爪机党慎入[浏览器够好的话还是可以进的],刷新率有60):http://demo.luojia.me/CanvasObjLibrary/
打开浏览器控制台输入
gui.Debug.on()
可以显示调试,鼠标移入canvas之后变灰的区域是会响应鼠标事件的区域
再输入
gui.Debug.eleinfo=true
可以标出详细信息
其中那张9是太鼓的子节点
太鼓的透明度是0.5
我给9加了两个事件:右击一下透明度增加,鼠标中键单击一下恢复不透明
太鼓有2个事件:左击开始旋转(由于9是太鼓的子节点,所以9会跟着一起转,又因为事件冒泡,所以点一下9太鼓也会转)。鼠标移上太鼓以后它会变大
那一行文本对象有一个事件:鼠标放在上面后滚动滚轮,文字会旋转
已有的事件有以下(事件是会冒泡的)
mouseover
mouseout
mousemove
mousewheel
mouseup
mousedown
click
centerclick
rightclick
keydown(我阻断了长按会连续触发的keydown)
keyup
keypress
触摸事件没空加入
此库的详细信息见我还在编写的wiki
https://github.com/iTisso/CanvasObjLibrary/wiki/_pages
更新:目前在火狐上出现了问题,提示”a.setZoom不是一个函数”,原因不明。鼠标坐标问题我似乎知道怎么回事了,开始试图自己解决
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。
佳佳君搞得这是什么东东
把用canvas画出来的东西当成对象像html dom一样可以控制(原来整个canvas是一个整体)
最近很颓废, 我就长话短说了.1. 绘图库不应该融合键盘鼠标事件的处理.2. 动画应基于时间而不是基于帧.3. setInterval和setTimeout做动画效果是不被推荐的, 请改用requestAnimationFrame, 同时你还不得不按第2条来修改代码.4. 作为lib, doc是必要的, 不要指望别人帮你写doc.5. 不要依赖格式化工具, 静态类的成员应该分成多个赋值来写而不是全都堆在初始化的{}里.6. 学会用JSHint等工具检查你的代码.
吖!其实这个库只是把图形作为对象画到画布上去的<(。_。)>,本来就只有绘制一帧的功能,动画是调用者自己处理的哦。5我看不懂什么意思。。。。(求解)