<input id="user_password" name="user[new_password]" type="password" value="" autocomplete="off" >
<input id="user_password_dummy" type="password" value="" style="display:none" >
(function function_name(container, horizontal) { var graph = Flotr.draw(container, graph_data, {options}); })(document.getElementById(id));
<head>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="flotr2.min.js"></script>
<style>
.graph {
margin: 5px;
width: 400px;
height: 200px;
}
</style>
<script>
var pie_values = [
{data : [[0, 64800]], label : 'データ1'},
{data : [[0, 712800]], label : 'データ2'},
{data : [[0, 447120]], label : 'データ3'},
{data : [[0, 231594]], label : 'データ4'},
{data : [[0, 108000]], label : 'データ5'}
];
var bars_values = [
{data : [[5, 32400],[4, 32400]], label : 'データ1'},
{data : [[6, 237600],[5, 237600],[4, 237600]], label : 'データ2'},
{data : [[6, 149040],[5, 149040],[4, 149040]], label : 'データ3'},
{data : [[6, 77198],[5, 77198],[4, 77198]], label : 'データ4'},
{data : [[5, 54000],[4, 54000]], label : 'データ5'}
];
</script>
</head>
<body>
<div id="values1-graph" class="graph"></div>
<div id="values2-graph" class="graph"></div>
<script type="text/javascript" src="graph.js"></script>
</body>
(function basic_pie(container) {
var graph;
graph = Flotr.draw(
container,
company_sales_graph_values,
{
HtmlText : false,
grid : {
verticalLines : false,
horizontalLines : false
},
xaxis : { showLabels : false },
yaxis : { showLabels : false },
pie : {
show : true,
explode : 6
},
mouse : { track : true },
legend : {
position : 'ne',
backgroundColor : '#ffffff'
}
}
);
})(document.getElementById("values1-graph"));
(function bars_stacked(container, horizontal) {
var graph, i;
graph = Flotr.draw(
container,
month_sales_graph_values,
{
legend : {
backgroundColor : '#D2E8FF' // Light blue
},
bars : {
show : true,
stacked : true,
horizontal : horizontal,
barWidth : 0.6,
lineWidth : 1,
shadowSize : 0
},
xaxis : {
noTicks : 12,
tickFormatter : function (n) {
n = Math.round(n);
return n + '月';
},
min: 1,
max: 12
},
mouse : { track : true },
grid : {
verticalLines : horizontal,
horizontalLines : !horizontal
},
legend : {
position : 'ne',
backgroundColor : '#ffffff'
}
});
})(document.getElementById("values2-graph"));
var button = document.querySelector('button'),
ul = document.querySelector('#output'),
itemCount = 0;
function addItems() {
for ( var i = 0; i < 10; i++ ) {
itemCount++;
ul.innerHTML += '<li><article class="item">'
+ '<h1 class="title">アイテム' + itemCount + '</h1>'
+ '<p class="detail">詳細' + itemCount + '</p>'
+ '</article></li>';
}
}
30分くらいでざっとコーディングして提出
var button = document.querySelector('button'),
ul = document.getElementById('output'),
itemId = 0;
var itemTemplate = '';
var addCount = 10;
var output = document.getElementById("output");
function createItem() {
itemId++;
var item = new Object();
item.title = 'アイテム' + itemId;
item.detail = '詳細' + itemId;
return item;
}
function loadItemTemplate(item) {
var li = document.createElement('li');
var article = document.createElement('article');
var h1 = document.createElement('h1');
var p = document.createElement('p');
article.setAttribute('class', 'item');
h1.setAttribute('class', 'title');
p.setAttribute('class', 'detail');
h1.textContent = item.title;
p.textContent = item.detail;
article.appendChild(h1);
article.appendChild(p);
li.appendChild(article);
return li;
}
function addItems() {
for ( var i = 0; i < addCount; i++ ) {
itemTemplate = loadItemTemplate(createItem());
document.getElementById('output').appendChild(itemTemplate);
}
}
テンプレートのHTML生成がループしてるので無駄だなと思いつつ、この程度だと計測時間が変わらなかったのでとりあえず。
丁寧にアドバイスを頂きました。
- Document Fragmentを経由
- getElementById()は高コストなのでキャッシュする
var button = document.querySelector('button'),
ul = document.getElementById('output'),
itemId = 0;
var template;
var addCount = 10;
var li;
var article;
var h1;
var p;
loadItemTemplate();
function createItem() {
itemId++;
var item = new Object();
item.title = 'アイテム' + itemId;
item.detail = '詳細' + itemId;
return item;
}
function loadItemTemplate() {
template = document.createElement('li');
article = document.createElement('article');
h1 = document.createElement('h1');
p = document.createElement('p');
article.setAttribute('class', 'item');
h1.setAttribute('class', 'title');
p.setAttribute('class', 'detail');
article.appendChild(h1);
article.appendChild(p);
template.appendChild(article);
}
function bindItem(item) {
h1.textContent = item.title;
p.textContent = item.detail;
var itemRow = template.cloneNode(true);
ul.appendChild(itemRow);
}
function addItems() {
for ( var i = 0; i < addCount; i++ ) {
bindItem(createItem());
}
}
cloneNode()を利用してみたけど、なんかViewの分離がちょっと汚くなっちゃたかな?
insertNode()とかを使って、ツリーを操作した方がスムーズなのかも。
<script src="build/three.min.js"></script>
<script src="js/Stats.js"></script>
<div id="container"></div>
var container;
container = document.getElementById('container');
var left = window.innerWidth / - 2;
var right = window.innerWidth / 2;
var top = window.innerHeight / 2;
var bottom = window.innerHeight / - 2;
var camera = new THREE.OrthographicCamera(left, right, top, bottom, -2000, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
引数の内容は、
OrthographicCamera(left, right, top, bottom, near, far, projectionMatrix)
ちなみに、現在3種類のカメラがある。
・THREE.OrthographicCamera:平行投影(正投影) ・THREE.PerspectiveCamera:透視投影 ・THREE.CombinedCamera:透視投影と平行投影の複合
※透視投影と平行投影の図的表現の違い
scene = new THREE.Scene();
・THREE.CubeGeometry ・THREE.CylinderGeometry ・THREE.ExtrudeGeometry ・THREE.IcosahedronGeometry ・THREE.LatheGeometry ・THREE.OctahedronGeometry ・THREE.PlaneGeometry ・THREE.SphereGeometry ・THREE.TorusGeometry ・THREE.TorusKnotGeometry ・THREE.BinaryLoader ・THREE.UTF8Loader
だいたい名前で想像がつくが、今回は直方体の CubeGeometry を利用。 MeshLambertMaterial() で光反射のマテリアルを作成。 元の3Dオブジェクトとマテリアルを引数に、Mesh()でCubeオブジェクトを作成し、Sceneに追加します。 (Three.jsの場合、Cubeオブジェクトというよりメッシュと言った方が通じるか?)
var geometry = new THREE.CubeGeometry(50, 50, 50);
var params = {
color: 0xffffff,
shading: THREE.FlatShading,
overdraw: true
};
var material = new THREE.MeshLambertMaterial(params);
var cube = new THREE.Mesh(geometry, material);
cube.scale.y = Math.floor(Math.random() * 2 + 1);
cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.x = 0.5;
directionalLight.position.y = 1.5;
directionalLight.position.z = 3.5;
directionalLight.position.normalize();
scene.add(directionalLight);
var ambientLight = new THREE.AmbientLight(0x10);
scene.add(ambientLight);
Lightには以下のものがある。
・THREE.AmbientLight ・THREE.DirectionalLight ・THREE.PointLight ・THREE.SpotLight
どう違うかは、後に調べてみよう。。。・CanvasRenderer ・WebGLRenderer ・DOMRenderer ・SVGRenderer
CanvasRenderer.domElement をcontainer(HTML要素)に追加後、Scene と Camera をレンダリングする。
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
とりあえず3D静止オブジェクトが描画される。
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 200;
camera.position.z = Math.sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
animate() でrequestAnimationFrame()を連続で呼び、render()で状態に応じてレンダリング処理している。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cube Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="build/three.min.js"></script>
<script src="js/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
init();
animate();
function init() {
container = document.getElementById('container');
addCamera();
addSecne();
addGrid();
addMaterial();
addLight();
addRenderer();
//addStatus();
window.addEventListener('resize', onWindowResize, false);
}
function addCamera() {
var left = window.innerWidth / -2;
var right = window.innerWidth / 2;
var top = window.innerHeight / 2;
var bottom = window.innerHeight / -2;
camera = new THREE.OrthographicCamera(left, right, top, bottom, -2000, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
}
function addSecne() {
scene = new THREE.Scene();
}
function addGrid () {
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(-500, 0, 0 ));
geometry.vertices.push( new THREE.Vector3(500, 0, 0));
for ( var i = 0; i <= 20; i ++ ) {
var parameters = { color: 0x000000, opacity: 0.2 };
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial(parameters));
line.position.z = ( i * 50 ) - 500;
scene.add( line );
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial(parameters));
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
}
function addMaterial () {
var geometry = new THREE.CubeGeometry( 50, 50, 50 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } );
for ( var i = 0; i < 100; i ++ ) {
var cube = new THREE.Mesh( geometry, material );
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
scene.add( cube );
}
}
function addLight () {
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.x = 0.5;
directionalLight.position.y = 1.5;
directionalLight.position.z = 3.5;
directionalLight.position.normalize();
scene.add(directionalLight);
var directionalLight = new THREE.DirectionalLight(0xcccccc);
directionalLight.position.x = 0.5;
directionalLight.position.y = 1.5;
directionalLight.position.z = 3.5;
directionalLight.position.normalize();
scene.add(directionalLight );
var ambientLight = new THREE.AmbientLight(0x10);
scene.add(ambientLight);
}
function addRenderer () {
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
}
function addStatus() {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 200;
camera.position.y = Math.sin(timer) * 200;
//camera.position.z = Math.sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Chrome環境で、テクスチャーをつけてないので結構スムーズに動きます。
何となく、Papervision3Dに近い気がしました。
ただ、これだけのサンプルだと何のイベントもないので「で?」ですねw
次は、イベント使ったサンプルを調べてみよう。
<img src="data:image/png;base64,AjKCLokX....">
みたいな
画像をbase64に変換するには、プログラミングするもよし、ツールを使うもよし。
ちなみにPHPだったら、
<?php
$img = file_get_contents( '画像URL' );
if ( $img !== false ) {
$img = base64_encode( $img );
}
?>
<canvas id="sample" ext="jpg"></canvas>
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '画像URL';
$("#sample").attr('width', img.width);
$("#sample").attr('height', img.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
※jQuery利用
画像サイズを取得して、Contextに描画する際にサイズ指定します。
事前にサイズがわかってる場合はCanvasにサイズ指定すればいいですが、それってどうよ?と個人的には思います。
http://hoge.com/page1#1
みたいな。 これでネット検索でアクセスした時に同じ結果を出す事ができます。