Code
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var startCircle, endCircle;
var circleRadius = 12;
var circleGroup = new Group();
var cursor = new Path.Circle({
radius: 12,
point: [0,0],
strokeColor: 'white',
strokeWidth: 2,
opacity: 0.8
});
var path = new Path({
strokeColor: 'blue',
strokeWidth: 20,
strokeCap: 'round'
});
function createPath(point){
path.add(point);
path.smooth({ type: 'continuous' });
path.strokeColor.hue += Math.random() * 360;
var tween = path.tweenTo(
{ strokeColor: 'blue' },
{
duration: 200,
easing: 'easeInCubic'
});
}
function createCircle(x,y){
var circle = new Path.Circle({
center: [x,y],
radius: circleRadius,
fillColor: 'orange',
applyMatrix: false,
parent: circleGroup,
onMouseEnter: function(){
this.scale(3);
this.fillColor = 'yellow';
view.element.style.setProperty('cursor', 'pointer');
},
onMouseLeave: function(){
this.scale(1/3);
this.fillColor = 'orange';
view.element.style.setProperty('cursor', null);
}
});
circleGroup.bringToFront();
var tween = circle.tweenTo(
{ scaling: 0.25 },
{
duration: 60,
easing: 'easeInCubic'
});
}
function onMouseUp(event){
if (startCircle === undefined){
startCircle = event.point;
}
createCircle(event.point.x, event.point.y);
endCircle = event.point;
createPath(event.point);
}
function onMouseMove(event){
cursor.position = event.point;
var nearestPoint = path.getNearestPoint(event.point);
cursor.position = nearestPoint;
cursor.bringToFront();
}