graphics - 减少脂肪中风

Question

我想画这个：在此处输入图像描述两条线沿着一条等距的贝泽路径。粗线是我想要的，小虚线是引导路径。

上图是先用宽度 30 抚摸路径，然后用与背景颜色相同的宽度 25 来完成。有时这可以正常工作，但如果背景不是纯色则不行。

我想要像“剪辑”这样的形状。而且我更愿意使用标准图形库来做到这一点。大多数 2d 图形画布中的工具更好。

笔记：

我正在使用 HTML 画布，但我认为这对问题并不重要。
我可以上下平移路径，但这不会让我到各处的中心距离相同。
也许它可以用渐变笔画来完成，但我不确定它们是如何工作的。

score 2 · Accepted Answer

我可以想办法在 HTML5 Canvas 中做到这一点。

您要做的是在内存中的临时画布上绘制一条曲线，然后在同一画布上绘制一条厚度较小且globalCompositeOperation设置为的相同曲线destination-out。

这会给你你想要的形状，基本上是两条线，它们之间是透明的。

然后将该画布绘制到上面有任何东西（复杂背景等）的真实画布上。

这是一个例子：

http://jsfiddle.net/at3zR/

score 1 · Accepted Answer

以下应该更好地说明我的意思。需要添加一个简单的算法来根据控制点相对于彼此的位置来调整偏移量。如果我有更多时间并记住，我会添加它。

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");
    }

})();

贝塞尔.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 */ body { font-family: arial, helvetica, sans-serif; 字体大小：85%；边距：10px 15px；颜色：#333；背景颜色：#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;
 }

graphics - 减少脂肪中风

2 回答 2

Related

Reference