Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: bb97d804f7
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (130 sloc) 3.102 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LibCanvas :: Ui :: Path Builder</title>
<link href="/files/styles.css" rel="stylesheet" />
<script src="/files/js/atom.js"></script>
<script src="/files/js/libcanvas.js"></script>
</head>
<body>
<button>Save</button>
<canvas></canvas>
<p><a href="/">Return to index</a></p>
<p>Mouse Wheel - rotating</p>
<p>Z + Mouse Wheel - scaling</p>
<script src="/files/js/ui-core.js"></script>
<script>
new function () {
LibCanvas.extract();
var libcanvas = new LibCanvas('canvas')
.listenMouse()
.listenKeyboard()
.size({
width : 400,
height: 250
}, true)
.start();
var anchor = atom.uri().anchor;
var path, start, line, curveTo, curve1, curve2, center, circle;
if (anchor) {
path = new Path.Builder(anchor).build();
path.each(function (method, args) {
if (method == 'moveTo' ) start = args[0];
if (method == 'lineTo' ) line = args[0];
if (method == 'curveTo') {
curveTo = args[0];
curve1 = args[1];
curve2 = args[2];
}
if (method == 'arc' ) {
circle = args[0].circle;
center = circle.center;
}
});
} else {
start = new Point( 200, 50 );
line = new Point( 300, 50 );
curveTo = new Point( 250, 150 );
curve1 = new Point( 350, 125 );
curve2 = new Point( 240, 60 );
center = new Point( 200, 150 );
circle = new Circle( center, center.distanceTo( curveTo ) );
path = new Path.Builder()
.move ( start )
.line ( line )
.curve( curveTo, curve1, curve2 )
.arc ({
circle: circle,
angle : [ 0, (270).degree() ]
})
.snapToPixel()
.build();
}
[curveTo, center].invoke('addEvent', 'move', function () {
circle.radius = center.distanceTo( curveTo );
});
libcanvas
.createShaper({
shape : path,
stroke: '#990000',
fill : '#330000',
hover : {
stroke: '#cc0000',
fill : '#660000'
},
active : {
stroke: '#cc6600',
fill : '#663300'
}
})
.setZIndex(1)
.listenMouse()
.clickable()
.draggable();
[start, line, curveTo, curve1, curve2, center].forEach(function (point) {
libcanvas
.createShaper({
shape : new Circle(point, 4),
stroke: '#009900',
fill : '#003300',
hover : {
stroke: '#00ff00',
fill : '#009900'
},
active : {
stroke: '#00ff66',
fill : '#009933'
}
})
.setZIndex(3)
.listenMouse()
.clickable()
.draggable();
});
[ [line, curve1], [curveTo, curve2] ].forEach(function (line) {
libcanvas
.createShaper({
shape : new Line( line ),
stroke: '#006600'
})
.setZIndex(2);
});
atom.dom('button').bind('click', function () {
window.location = '#' + path.builder.stringify('|');
});
libcanvas.mouse.addEvent( 'wheel' , function (e) {
if (libcanvas.getKey('z')) {
path.scale ( e.delta < 0 ? 1.3 : 0.7 , e.offset );
} else {
path.rotate( (6).degree() * e.delta, e.offset );
}
libcanvas.update();
e.preventDefault();
});
libcanvas.update();
};
</script>
<script src="/files/js/google-analytics.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.