diff --git a/example/page/component/pages/img/index.js b/example/page/component/pages/img/index.js index dfe2253..624c569 100644 --- a/example/page/component/pages/img/index.js +++ b/example/page/component/pages/img/index.js @@ -86,7 +86,7 @@ Page({ // }) this.wxCanvas.add(img); // circle2.setOrigin([100,10]); - img.animate({x:"+100",w:1000,h:1000,rotate:Math.PI/2},{duration:5000}).start(100) + img.animate({x:"+100",w:1000,h:1000,rotate:Math.PI/2},{duration:5000}).start(10) // circle2.updateOption( // { rotate:-Math.PI/4} // ); diff --git a/wxDraw/src/thoughts.md b/wxDraw/src/thoughts.md deleted file mode 100755 index 819c109..0000000 --- a/wxDraw/src/thoughts.md +++ /dev/null @@ -1,180 +0,0 @@ -- store -- animation -- painter -- handler - - - -TODO -- base shape - - rect - - arc - - polygon - - img -- drag -- event - - click - - touch - - - - -##### animationFrame是暴露给用户还是自己内部调用？？？ - -##### 终于明白 eventBus 在这里的作用了。。。 -- 父级 调子集 可以直接调用 但是自己没法调用父集 那就可以。。。把父集穿进去 或者 把bus传进去 - - -##### 动画延续性 -animate之后 如何继续调animate？ 在目标模式下不会有什么 问题 直接按照目标来就行了，但是在自增模式下就会有问题所以动画渲染上 不能拿直接就push进数组 然后开始动画，应该有一个专门的动画 -排队器，如果是 - - 同时调用 那就是平级动画 - - 链式调用那就是 顺序动画 - -### eventbus简直不要太好用 ！！！ - - -- 拖拽层级 -- 碰撞检测 -- 物体多维动画 - - 简单多维 -- 颜色渐变动画 - - -### 动画的暂停 循环 以及 开始 - -动画添加后先不回自动运行，而是在父集将其动画改成了 true的时候 才会 开始自己的动画 -不过 尴尬的是 animate的时候我就讲动画添加到 Animation主管的aniamrionList里面 -所以这里需要在这里让他调用 start，然后将动画加在里面去，而且 这里加一个flag 就是是否循环这个动画，循环，那就需要记录初始状态，在此物体此次动画结束之后，继续此次动画，但是问题就在这里了。。。什么叫此次动画。。。是不是每单独调一次那就算是一次动画？？？ -为了区别单独掉一次，与连续调，是不是animate里面return 出来的要加点东西，加一个暗号，就是在animate开始调了的时候, 到最后start 就算是一次 - -### 物体的碰撞 我觉得不应该放在物体上 而是放在 一个单独的碰撞检测上 用于控制动效 因为这是模拟物理的 要写一个模拟物理引擎 - -### 对于用户自定义的图形 -- 自定义点位 -- 自定义点位之后确定中心 -- 动画只有rotate 其余没有 -- setOption的时候 可以 设置点位吗？不然只能设置 style了 - - -### 似乎旋转之后的检测也是有问题的 -图形旋转了 但是检测的点并没有跟着一起旋转。。。 有问题 -也就是 旋转了监测点也得变 但是物体的坐标不会变 这里就要单独拎出来一个监测点变化 监测点是用于鼠标点击检测的 - -### 物体的旋转平移缩放 都得改成矩阵的形式才行。。。 -这样才能便于计算。。。 - - -- 投影轴定理 -- pnp算法 点在多边形 内部算法 ![ZHE](http://blog.csdn.net/hjh2005/article/details/9246967) -- 矩阵变换 - 点位按照 某个点旋转 [->](http://blog.csdn.net/csxiaoshui/article/details/65446125) 这个有问题 ！！！ - 还有这个 。。。 不用矩阵也行 [](https://stackoverflow.com/questions/2259476/rotating-a-point-about-another-point-2d) - [看这个](https://math.stackexchange.com/questions/2093314/rotation-matrix-and-of-rotation-around-a-point) - - -### 函数还是 定义得 对外留接口 少点隐形的内部变量 - - -### 万一用户是凹多边形呢 - -### 关于用户 定义形状 的动画我觉得应该支持的动画 -- 平移 这个就不行了 需要在frag里面添加一个 特殊属性支持 -- 旋转 Option里面的rotate就可以 - -- 缩放？？？ //这个就得全部都加上 - - -### 层级自动转换 ？ - - -### TODO -- √用户自定义点击事件 -- √用户自定义拖拽事件 -- √ 线条 -- 运动时刻需要无法点击 -- 绘制优化 -- √zindex 可以更改 -- √ 曲线点击 这个可以将曲线当成复杂的polygon -- √ 圆没有画全的的时候的点击检测 -- √ 椭圆 -- √ 代码有几个形状 有一些相通的地方 还是在那里精简下代码 -- 贝塞尔曲线有点尴尬 该加在哪里？ -- 设置了 渐变的 就没法 颜色动画了 这个必须说明 -- √ 点击检测需不需要考虑 。。线宽 好像需要 到那时线宽怎么算 ？ 这里就得求导了 求导找切向量 -- √增加图形 然后还有销毁图形 -- √圆弧圆环的检测 最终还是要转回 转变为检测点的形式 -- √ 随机线 随机图形的检测 边 。。没法检测 -- paperjs里面那种物理特效咋弄 -- 渐变 渐变 咋回事呢 渐变 渐变 -- 群组？？？ -- √tap -- √longpress - - √混合绘制 -- √linedash -- ~贝塞尔曲线~ -- 曲线的点击。。可以用微元法。。。卧槽 牛逼 我 居然想出这么恶心的方法「小方块就是隶属于曲线的每一个像素块每一个像素块都有自己的位置还有w,h只要小方块被点击了 那就是父集被点击了。。。卧槽我是天才。。。。。不过如果每一个这么来绘制的话。。 曲线会长得很丑 特别是转弯的地方小方块不会转弯 除非再求导 而且不能 lineDash」 -- 绘制优化 一切没有变化的 就不用重新计算点位 -- 再次添加怎么办 ？更新图层？ -- 还有 是不是应该clone -### 小程序 引入构造函数 //console 是null 但是还是可以执行 - -### 艹 小程序 注释多了，console多了tm就会挂掉 我去，无语了 - - - -### 优化 -- √动画绘制完成 那就关闭 循环 -- 有没有只绘制当前这一块的 -- √兼容性处理 比如 lineDash - - -我去。。。 我的bus可能不用这么麻烦 直接继承就行了 -继承的话 就会将this指向父集 - -发现一个 bug - -旋转 如果不是以自己的为旋转中心的 的话 -点位变了，但是内部中心并没有变 -所以点击事件 检测中心还是以原来那个来的，所以这里有一个问题 -所以必须在旋转之后 重新计算出点来+中心 -下一步如果是点击操作 应该用新的中心来检测 这个时候所有的点页已经被计算出来了 -那么也就是以后全都以最初创造创造出的点位来作为拖拽 -以及 旋转的时候用 - -但是在 x，y 变大的时候 需要重新计算点位， - -流程 是这样的 -- 拿到初始中心点 -- 计算绘制点位 -- 然后如果旋转 计算旋转点位 - - 情况1 以自身中心为点位 旋转后 重新计算绘制点位 但是点击检测中点不变 - - 情况2 以其他点位为旋转中心 旋转后 不仅要重新计算绘制点位 还要计算自己的中心。 -- 然后如果再次旋转继续以上流程「直接计算的就是上一次的点位」 -- 如果是动画 - - 普通x,y 运动直接是更改属性 「但是变换完了属性 那就需要 计算点位了，问题是这个是总面积算，中心与绘制点位之间的关系，不再是简单的」 - - 变换旋转的时候，就需要继续更新中心了 -- 如果是点击 - -至少动画的时候 -- 先计算属性 -- 算出绘制点 -- 绘制 - -但是现在不一样了 -- 现计算属性 -- 算出绘制点 -- 绕其他旋转中心旋转 -- 计算出点位还有中心 -- 忘掉上一次的旋转中心 -- 下一次绘制的时候 就是以不规则多边形来旋转了？ -- 那动画呢 如果以不规则多边形来旋转问题就来了，动画更改属性的那个一个体系怎么办？ -- 所以我们必须找出来一个办法 就是 旋转后 找到现在的中心一点位之间关系 -- 没想出好的解决方案 -- 只能是限制是动画类型 -- 还是事件类型 -- 事件类型 -- 就没法有 rotateOrigin 的形式的旋转 -- 也就是在添加事件之后没法有 rotateOrigin 形式的旋转 -- 可以 drag 就没法 rotateOrigin 的形式 --