- html 文件很简单, 只需一个盒子
<div id="draw-shapes"></div>
- js
几个需要注意的地方 ,
1: two.js 中, 图像默认的旋转中心是该图形的定位点( 图形的中心点 )
2. 如果需要旋转多个图形 , 则需要将这些图形归为一组(var group = two.makeGroup(o1, o2, ..., on)
);
3. 分组之后 , 该组的旋转中心默认为画布左上角 , 即(0, 0)点;
4. 需要使用group.translation.set(x, y);
平移旋转中心
5. 平移之后该组合中所有的图形的定位点都变为 (x, y) 需要重新进行定位
6. 如果一个组合里面还有一个需要旋转的图形(该例子中为地球组合中的月球) , 则先将月球单独归为一组, 使其绕地球旋转, 然后将地球,轨道,月球组 (注意: 这里是月球组 , 而不是单个月球) 归为一组 . 绕太阳旋转;
月球的最终定位由地球组决定.
var elem = document.getElementById('draw-shapes');
var two = new Two({width: 600, height: 600, type: Two.Types.svg}).appendTo(elem);
// 太阳
var sun = two.makeCircle(300, 300, 80);
sun.fill = '#f00';
sun.noStroke();
// 太阳轨道
var sunTrack = two.makeCircle(300, 300, 220);
sunTrack.stroke = '#ddd';
sunTrack.noFill();
// 地球
var earth = two.makeCircle(220, 0, 30);
earth.fill = '#00f';
earth.noStroke();
// 地球轨道
var earthTrack = two.makeCircle(220, 0, 60);
earthTrack.stroke = '#ddd';
earthTrack.noFill();
// 月球
var moon = two.makeCircle(60, 0, 5);
moon.fill = '#ff0';
moon.noStroke();
// 月球组合: 月球
var mGroup = two.makeGroup(moon);
mGroup.translation.set(220, 0); // 偏移位置相对于后面的地球组进行定位
// 地球组合: 地球,轨道,月球组合
var eGroup = two.makeGroup(earth, earthTrack, mGroup); // 月球组, 而不是单个月球
eGroup.translation.set(300, 300);
two.bind('update', function() {
mGroup.rotation += 1*Math.PI/180; // 必须使用+= 每次旋转 1°
eGroup.rotation += 1*Math.PI/180;
}).play(); // .play()方法开启动画循环
two.update();