Created
March 18, 2013 12:25
-
-
Save hurry07/5186821 to your computer and use it in GitHub Desktop.
tool source
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<style> | |
body { | |
margin: 0px; | |
padding: 0px; | |
} | |
canvas { | |
border: 1px solid #9C9898; | |
} | |
#tango { | |
position: absolute; | |
top: 10px; | |
left: 10px; | |
padding: 10px; | |
} | |
#container { | |
background-image: url("http://www.html5canvastutorials.com/demos/assets/blue-background.jpg"); | |
display: inline-block; | |
overflow: hidden; | |
height: 365px; | |
width: 580px; | |
} | |
</style> | |
</head> | |
<body onmousedown="return false;"> | |
<div id="container"></div> | |
<input type="button" id="tango" value="Tango!"> | |
<script src="../dist/kinetic-v4.3.3.min.js"></script> | |
<script> | |
function tango(layer) { | |
for(var n = 0; n < layer.getChildren().length; n++) { | |
var shape = layer.getChildren()[n]; | |
var stage = shape.getStage(); | |
shape.transitionTo({ | |
rotation: Math.random() * Math.PI * 2, | |
radius: Math.random() * 100 + 20, | |
x: Math.random() * stage.getWidth(), | |
y: Math.random() * stage.getHeight(), | |
opacity: Math.random(), | |
duration: 1, | |
easing: 'ease-in-out' | |
}); | |
} | |
} | |
var stage = new Kinetic.Stage({ | |
container: 'container', | |
width: 578, | |
height: 363 | |
}); | |
var layer = new Kinetic.Layer(); | |
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; | |
for(var n = 0; n < 10; n++) { | |
var shape = new Kinetic.RegularPolygon({ | |
x: Math.random() * stage.getWidth(), | |
y: Math.random() * stage.getHeight(), | |
sides: Math.ceil(Math.random() * 5 + 3), | |
radius: Math.random() * 100 + 20, | |
fill: colors[Math.round(Math.random() * 5)], | |
stroke: 'black', | |
opacity: Math.random(), | |
strokeWidth: 4, | |
draggable: true | |
}); | |
layer.add(shape); | |
} | |
stage.add(layer); | |
document.getElementById('tango').addEventListener('click', function() { | |
tango(layer); | |
}, false); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<style> | |
body { | |
margin: 0px; | |
padding: 0px; | |
} | |
</style> | |
<script src="../dist/kinetic-v4.3.3.min.js"></script> | |
<script> | |
function updateDottedLines(layer) { | |
var q = layer.quad; | |
var b = layer.bezier; | |
var quadLine = layer.get('#quadLine')[0]; | |
var bezierLine = layer.get('#bezierLine')[0]; | |
quadLine.setPoints([q.start.attrs.x, q.start.attrs.y, q.control.attrs.x, q.control.attrs.y, q.end.attrs.x, q.end.attrs.y]); | |
bezierLine.setPoints([b.start.attrs.x, b.start.attrs.y, b.control1.attrs.x, b.control1.attrs.y, b.control2.attrs.x, b.control2.attrs.y, b.end.attrs.x, b.end.attrs.y]); | |
layer.draw(); | |
} | |
function buildAnchor(layer, curveLayer, x, y) { | |
var anchor = new Kinetic.Circle({ | |
x: x, | |
y: y, | |
radius: 20, | |
stroke: '#666', | |
fill: '#ddd', | |
strokeWidth: 2, | |
draggable: true | |
}); | |
// add hover styling | |
anchor.on('mouseover', function() { | |
document.body.style.cursor = 'pointer'; | |
this.setStrokeWidth(4); | |
layer.draw(); | |
}); | |
anchor.on('mouseout', function() { | |
document.body.style.cursor = 'default'; | |
this.setStrokeWidth(2); | |
layer.draw(); | |
}); | |
anchor.on('dragend', function() { | |
drawCurves(curveLayer.getCanvas(), layer.quad, layer.bezier); | |
updateDottedLines(layer); | |
}); | |
layer.add(anchor); | |
return anchor; | |
} | |
function drawCurves(canvas, quad, bezier) { | |
canvas.clear(); | |
var context = canvas.getContext(); | |
// draw quad | |
context.beginPath(); | |
context.moveTo(quad.start.attrs.x, quad.start.attrs.y); | |
context.quadraticCurveTo(quad.control.attrs.x, quad.control.attrs.y, quad.end.attrs.x, quad.end.attrs.y); | |
context.strokeStyle = 'red'; | |
context.lineWidth = 4; | |
context.stroke(); | |
// draw bezier | |
context.beginPath(); | |
context.moveTo(bezier.start.attrs.x, bezier.start.attrs.y); | |
context.bezierCurveTo(bezier.control1.attrs.x, bezier.control1.attrs.y, bezier.control2.attrs.x, bezier.control2.attrs.y, bezier.end.attrs.x, bezier.end.attrs.y); | |
context.strokeStyle = 'blue'; | |
context.lineWidth = 4; | |
context.stroke(); | |
} | |
window.onload = function() { | |
var stage = new Kinetic.Stage({ | |
container: 'container', | |
width: 578, | |
height: 500 | |
}); | |
// layer contains lines and anchors | |
var layer = new Kinetic.Layer(); | |
// curveLayer just contains a canvas which is drawn | |
// onto with the existing canvas API | |
var curveLayer = new Kinetic.Layer(); | |
var quadLine = new Kinetic.Line({ | |
dashArray: [10, 10, 1, 10], | |
strokeWidth: 3, | |
stroke: 'black', | |
lineCap: 'round', | |
id: 'quadLine', | |
opacity: 0.3, | |
points: [0, 0] | |
}); | |
var bezierLine = new Kinetic.Line({ | |
dashArray: [10, 10, 0, 10], | |
strokeWidth: 3, | |
stroke: 'black', | |
lineCap: 'round', | |
id: 'bezierLine', | |
opacity: 0.3, | |
points: [0, 0] | |
}); | |
// add dotted line connectors | |
layer.add(quadLine); | |
layer.add(bezierLine); | |
/* | |
* add custom property curve objects to layer so that | |
* they can be modified by reference | |
*/ | |
layer.quad = { | |
start: buildAnchor(layer, curveLayer, 60, 30), | |
control: buildAnchor(layer, curveLayer, 240, 110), | |
end: buildAnchor(layer, curveLayer, 80, 160) | |
}; | |
layer.bezier = { | |
start: buildAnchor(layer, curveLayer, 280, 20), | |
control1: buildAnchor(layer, curveLayer, 530, 40), | |
control2: buildAnchor(layer, curveLayer, 480, 150), | |
end: buildAnchor(layer, curveLayer, 300, 150) | |
}; | |
stage.getDragLayer().beforeDraw(function() { | |
drawCurves(curveLayer.getCanvas(), layer.quad, layer.bezier); | |
updateDottedLines(layer); | |
}); | |
stage.on('mouseout', function() { | |
layer.draw(); | |
}); | |
stage.add(curveLayer); | |
stage.add(layer); | |
drawCurves(curveLayer.getCanvas(), layer.quad, layer.bezier); | |
updateDottedLines(layer); | |
}; | |
</script> | |
</head> | |
<body onmousedown="return false;"> | |
<div id="container"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<style> | |
body { | |
margin: 0px; | |
padding: 0px; | |
} | |
#container { | |
background-image: url("assets/lines.jpg"); | |
width: 512px; | |
height: 512px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"></div> | |
<script src="../dist/kinetic-v4.3.3.min.js"></script> | |
<script> | |
var stage = new Kinetic.Stage({ | |
container: 'container', | |
width: 1024, | |
height: 512 | |
}); | |
var lineLayer = new Kinetic.Layer(); | |
var flowerLayer = new Kinetic.Layer(); | |
var flower = new Kinetic.Group({ | |
x: stage.getWidth() / 2, | |
y: stage.getHeight() / 2, | |
draggable: true, | |
scale : {x: 0.5, y:0.5} | |
}); | |
// build stem | |
var stem = new Kinetic.Line({ | |
strokeWidth: 10, | |
stroke: 'green', | |
points: [{ | |
x: flower.getX(), | |
y: flower.getY() | |
}, { | |
x: stage.getWidth() / 2, | |
y: stage.getHeight() + 10 | |
}] | |
}); | |
// build center | |
var center = new Kinetic.Circle({ | |
x: 0, | |
y: 0, | |
radius: 20, | |
fill: 'yellow', | |
stroke: 'black', | |
strokeWidth: 4 | |
}); | |
center.on('mouseover', function() { | |
this.setFill('orange'); | |
flowerLayer.draw(); | |
document.body.style.cursor = 'pointer'; | |
}); | |
center.on('mouseout', function() { | |
this.setFill('yellow'); | |
flowerLayer.draw(); | |
document.body.style.cursor = 'default'; | |
}); | |
// build petals | |
var numPetals = 10; | |
for(var n = 0; n < numPetals; n++) { | |
// induce scope | |
( function() { | |
/* | |
* draw custom shape because KineticJS | |
* currently does not support tear drop | |
* geometries | |
*/ | |
var petal = new Kinetic.Shape({ | |
drawFunc: function(canvas) { | |
var context = canvas.getContext(); | |
context.beginPath(); | |
context.moveTo(-5, -20); | |
context.bezierCurveTo(-40, -90, 40, -90, 5, -20); | |
context.closePath(); | |
canvas.fillStroke(this); | |
}, | |
opacity: 0.8, | |
fill: '#00dddd', | |
strokeWidth: 4, | |
draggable: true, | |
rotation: 2 * Math.PI * n / numPetals | |
}); | |
petal.on('mouseover', function() { | |
this.setFill('blue'); | |
flowerLayer.draw(); | |
}); | |
petal.on('mouseout', function() { | |
this.setFill('#00dddd'); | |
flowerLayer.draw(); | |
}); | |
flower.add(petal); | |
}()); | |
} | |
stage.on('mouseup', function() { | |
document.body.style.cursor = 'default'; | |
}); | |
lineLayer.add(stem); | |
flower.add(center); | |
flowerLayer.add(flower); | |
// keep stem in sync with center | |
stage.getDragLayer().afterDraw(function() { | |
stem.attrs.points[0] = flower.getPosition(); | |
lineLayer.draw(); | |
}); | |
function onRowTypeClick() { | |
} | |
function layout(from, frompoint, to, topoint, offsetx, offsety) { | |
} | |
var DB = {}; | |
DB.Row = function(data) { | |
this.init(data); | |
} | |
DB.Row.prototype.init = function(data) { | |
this.data = data; | |
this.ui = new Kinetic.Group(); | |
this.bg = new Kinetic.Rect({ | |
x: 0, | |
y: 0, | |
width: 100, | |
height: 25, | |
fill: 'purple', | |
opacity : 0.95 | |
}); | |
this.name = new Kinetic.Text({ | |
x: 0, | |
y: 0, | |
text: data.name, | |
fontSize: 18, | |
fontFamily: 'Calibri', | |
fill: 'yellow', | |
padding: 4, | |
align: 'center' | |
}); | |
this.type = new Kinetic.Text({ | |
x: 0, | |
y: 0, | |
text: data.type, | |
fontSize: 18, | |
fontFamily: 'Calibri', | |
fill: 'yellow', | |
padding: 4, | |
align: 'center' | |
}); | |
this.ui.add(this.bg); | |
this.ui.add(this.name); | |
this.ui.add(this.type); | |
} | |
DB.Row.prototype.getMinWidth = function() { | |
return this.name.getWidth() + this.type.getWidth(); | |
} | |
DB.Row.prototype.resize = function(sizeconf) { | |
var pwidth = sizeconf.width; | |
var pheight = sizeconf.height; | |
var bg = this.bg; | |
var name = this.name; | |
var type = this.type; | |
bg.setSize(pwidth, pheight); | |
name.setPosition(sizeconf.prefix, (pheight - name.getHeight()) / 2); | |
type.setPosition(pwidth - type.getWidth() - sizeconf.suffix, (pheight - name.getHeight()) / 2); | |
} | |
DB.Table = function(config) { | |
if(!config) { | |
config = this.createDefaultTable(); | |
} | |
this.initTable(config); | |
} | |
DB.Table.prototype = { | |
createDefaultTable : function() { | |
return {name:'table_1'}; | |
}, | |
preffer : { | |
width:180, | |
height:25, | |
margin:1, | |
prefix:10, | |
suffix:15 | |
}, | |
initTable : function(config) { | |
this.attrs = config; | |
this.rows = []; | |
var size = config.rows.length; | |
this.ui = new Kinetic.Group(); | |
for(var i=0;i<size;i++) { | |
var row = new DB.Row(config.rows[i]); | |
this.rows.push(row); | |
this.ui.add(row.ui); | |
} | |
this.resize(); | |
}, | |
resize : function() { | |
var preffer = this.preffer; | |
var rowy = 0; | |
var size = this.rows.length; | |
var maxwidth = 0; | |
for(var i=0;i<size;i++) { | |
var row = this.rows[i]; | |
var pwidth = row.getMinWidth(); | |
if(maxwidth < pwidth) { | |
maxwidth = pwidth; | |
} | |
} | |
for(var i=0;i<size;i++) { | |
var row = this.rows[i]; | |
row.resize(preffer); | |
row.ui.setPosition(0, rowy); | |
rowy += preffer.height + preffer.margin; | |
} | |
} | |
} | |
DB.Manager = function() { | |
this.tables = {}; | |
this.reffers = {}; | |
this.shortcuts = {}; | |
} | |
DB.Manager.prototype.regist = function(pTable) { | |
} | |
DB.Manager.prototype.remove = function(pTable) { | |
} | |
var table = new DB.Table({ | |
name:'first_table', | |
rows:[ | |
{name:'hello', type:'I'}, | |
{name:'fine', type:'I'}, | |
{name:'finished', type:'B'}, | |
{name:'length', type:'F'}, | |
{name:'child', type:'R'}, | |
{name:'precision', type:'D'}, | |
] | |
}); | |
var manager = new DB.Manager(); | |
manager.regist(table); | |
table.ui.setDraggable(true); | |
lineLayer.add(table.ui); | |
stage.add(lineLayer); | |
var shape = new Kinetic.RegularPolygon({ | |
x: Math.random() * stage.getWidth(), | |
y: Math.random() * stage.getHeight(), | |
sides: Math.ceil(Math.random() * 5 + 3), | |
radius: Math.random() * 100 + 20, | |
fill: 'blue', | |
stroke: 'black', | |
opacity: 0.8, | |
strokeWidth: 4, | |
draggable: true | |
}); | |
flowerLayer.add(shape); | |
stage.add(flowerLayer); | |
console.log(shape.getOffset()); | |
console.log(shape); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�����Exif MM * | |