Question

我想画这个： enter image description here 沿着具有相等距离的beizer路径的两条线。胖线是我想要的，小点缀的是引导路径。

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

我想要一个像'clip'的形状。我宁愿使用标准图形库来做到这一点。更好的是大多数2D图形画布中的工具。

注意：

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

Answer 1

我可以想一想在HTML5 Canvas中这样做的方法。

您要做的是在内存中的临时画布上绘制曲线 - - 然后绘制相同的曲线，厚度更小，globalCompositeOperation设置为{{ 1}}在同一个画布上。

这将为您提供您想要的形状，基本上是2行，它们之间具有透明度。

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

以下是一个例子：

http://jsfiddle.net/at3zR/

Answer 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; font-size：85％; 保证金：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;
 }

减少中风

2 个答案: