Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EaselJS: Curve To Demo</title>
​
    <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
​
<script id="editable">
    var canvas, stage;
    var marker;
    var oldPt;
    var oldMidPt;
    var title;
    var color;
    var stroke;
    var colors;
    var index;
    function init() {
        canvas = document.getElementById("myCanvas");
        index = 0;
        stage = new createjs.Stage(canvas);
        stage.autoClear = true;
        stage.enableDOMEvents(true);
        createjs.Touch.enable(stage);
        createjs.Ticker.setFPS(24);
        stage.addEventListener("stagemousedown", handleMouseDown);
        stage.addEventListener("stagemouseup", handleMouseUp);
​
        stage.update();
    }
  
    function handleMouseDown(event) {
        if (!event.primary) { return; }
        marker = new createjs.Shape();
        marker.stroke = marker.graphics.beginStroke('yellow').command;
        stroke = Math.random() * 30 + 10 | 0;
        oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
        oldMidPt = oldPt.clone();
        stage.addChild(marker);
        stage.addEventListener("stagemousemove", handleMouseMove);
    }
  
    function handleMouseMove(event) {
        if (!event.primary) { return; }
        var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
        marker.graphics.setStrokeStyle(stroke, 'round', 'round').moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
        oldPt.x = stage.mouseX;
        oldPt.y = stage.mouseY;
        oldMidPt.x = midPt.x;
        oldMidPt.y = midPt.y;
        stage.update();
    }
  
    function handleMouseUp(event) {
        if (!event.primary) { return; }
        stage.removeEventListener("stagemousemove", handleMouseMove);
        
        //CLONE A NEW MARKER AND CHANGE COLOR
        var clonedMarker = marker.clone(true);
        clonedMarker.stroke = marker.stroke;
        clonedMarker.stroke.style = 'blue';
        //MOVING ORIGINAL MARKER FOR REFERENCE
        marker.x -= 50;
        marker.y -= 50;
        stage.addChild(clonedMarker);
        stage.update();
    }
  
</script>
</head>
​
<body onload="init();">
​
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers