f3.js

var f3js = require('f3js') , c = f3js.cc(); c.x = 20; c.y = 10; c.drawCircle(80, 80, 80); // 円を描く var Grove = require('jsupm_grove') , buttons = [] , numButtons = 5; // ボタン数 [1, 5] var circleGuide = c.drawCircle(80, 80, 50); // ガイドを描く circleGuide.layout = { name: 'distribute', valign: 'middle' }; for (var i = 0; i < numButtons; i ++) { var circle = c.drawCircle(0, 0, 5 * (i + 1)); c.add(circle, circleGuide); var button = new Grove.GroveButton(3 + i); c.add(button, circleGuide); // ボタンを配置する buttons.push(button); } var lineGuide = c.drawLine(0, 200, 160, 200); lineGuide.layout = { name: 'align', padding: 5 }; for (var i = 0; i < numButtons; i ++) { var button = new Grove.GroveButton(3 + numButtons + i); c.add(button, lineGuide).rotate(10 * i); // ボタンを配置する buttons.push(button); } var lineWrappingGuide = c.drawLine(160, 230, 160, 270); lineWrappingGuide.layout = { name: 'align' }; for (var i = 0; i < numButtons; i ++) { var button = new Grove.GroveButton(3 + numButtons * 2 + i); c.add(button, lineWrappingGuide); // ボタンを配置する buttons.push(button); } setInterval(function () { // ボタンが押されたらコンソールにメッセージを出す for (var i = 0; i < buttons.length; i ++) { if (buttons[i].value() > 0) console.log('button(' + i + ') pressed.'); } }, 100); // その他のコードは http://f3js.org/projects を見てみましょう！ // APIドキュメントは http://f3js.org/docs にあります。