Geek asks and answers

Fat Stroke Cutting

I want to draw this: enter image description here Two lines follow along the path with beads with equal distance. Bold lines - this is what I want, a small dotted line is a guiding path.

The image above is performed by first stroking a path with a width of 30, and then with a width of 25 in the same color as the background. Sometimes this works fine, but not if the background is not normal.

I want something like a β€œclip” with a form. And I would prefer to do this using standard graphics libraries. Even better are the tools that come with most 2D canvas graphics.

Notes:

  • I am using HTML canvas, but I do not think this is important for the problem.
  • I can translate the path up and down, but that will not give me the same distance to the center everywhere.
  • , , , .
+3
2

HTML5.

, - - globalCompositeOperation, destination-out on .

, , , .

, ( ..).

:

http://jsfiddle.net/at3zR/

+2

, . , , . , .

bezier.js
/* 
 * 
 * This code was Shamlessly stolen from:
 * Canvas curves example
 *
 * By Craig Buckler,        http://twitter.com/craigbuckler
 * of OptimalWorks.net      http://optimalworks.net/
 * for SitePoint.com        http://sitepoint.com/
 * 
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
 *
 * This code can be used without restriction. 
 */

(function() {

    var canvas, ctx, code, point, style, drag = null, dPoint;

    // define initial points
    function Init(quadratic) {

        point = {
            p1: { x:100, y:250 },
            p2: { x:400, y:250 }
        };

        if (quadratic) {
            point.cp1 = { x: 250, y: 100 };
        }
        else {
            point.cp1 = { x: 150, y: 100 };
            point.cp2 = { x: 350, y: 100 };
        }

        // default styles
        style = {
            //#333
            curve:  { width: 2, color: "#C11" },
            cpline: { width: 1, color: "#C11" },
            point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
        }

        // line style defaults
        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        // event handlers
        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;

        DrawCanvas();
    }

    function controlLine(offset) {
        // curve
        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x+offset, point.p1.y+offset);
        ctx.bezierCurveTo(point.cp1.x+offset, point.cp1.y+offset, point.cp2.x+offset, point.cp2.y+offset, point.p2.x+offset, point.p2.y+offset);
        ctx.stroke();
    }

    function controlPoints(/*hidden*/) {
        // control point tethers
        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        ctx.lineTo(point.cp1.x, point.cp1.y);
            ctx.moveTo(point.p2.x, point.p2.y);
            ctx.lineTo(point.cp2.x, point.cp2.y);
        ctx.stroke();

        // control points
        for (var p in point) {
            ctx.lineWidth = style.point.width;
            ctx.strokeStyle = style.point.color;
            ctx.fillStyle = style.point.fill;
            ctx.beginPath();
            ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
            ctx.fill();
            ctx.stroke();
        }
    } 


    // draw canvas
    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        controlLine(-10);
        controlLine(+10);
        controlPoints();
    }

    // start dragging
    function DragStart(e) {
        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            dx = point[p].x - e.x;
            dy = point[p].y - e.y;
            if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                drag = p;
                dPoint = e;
                canvas.style.cursor = "move";
                return;
            }
        }
    }


    // dragging
    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }


    // end dragging
    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }


    // event parser
    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }


    // start
    canvas = document.getElementById("canvas");
    code = document.getElementById("code");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init(canvas.className == "quadratic");
    }

})();

bezier.html

<!--
   bezier.html

   Copyright 2012 DT <dtyree@inkcogito>

   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.


-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.21" />
     <meta charset="UTF-8" />
     <title>B&#233;zier Example</title>
 </head>

 <link rel="stylesheet" type="text/css" media="all" href="styles.css" />

 <body>

    <h1>Canvas B&#233;zier Curve Example</h1>

    <canvas id="canvas" height="500" width="500" class="bezier"></canvas>
    <pre id="code">code</pre>

    <p>This demonstration shows how parallel b&#233;zier curves can be drawn on a canvas element. Drag the line ends or the control points to change the curve.</p>

    <script type="text/javascript" src="bezier.js"></script>

 </body>

 </html>

styles.css
   /* CSS */        {       font-family: arial, helvetica, sans-serif;        : 85%;       margin: 10px 15px;       : # 333;       background-color: #ddd;    }

 h1
 {
    font-size: 1.6em;
    font-weight: normal;
    margin: 0 0 0.3em 0;
 }

 h2
 {
    font-size: 1.4em;
    font-weight: normal;
    margin: 1.5em 0 0 0;
 }

 p
 {
    margin: 1em 0;
 }

 #canvas
 {
    display: inline;
    float: left;
    margin: 0 10px 10px 0;
    background-color: #fff;
 }
+1

More articles:


All Articles