뚱뚱한 치기를 자르십시오

Question

나는 이것을 당길 원합니다 : 동등한 거리를 가진 beizer 경로에 따라서 a의 뒤에 2 개의 선. 뚱뚱한 선은 내가 원했던 것이고 작은 점선은 유도 경로입니다.

위의 이미지는 먼저 너비가 30 인 패스를 쓰다가 배경과 같은 색상으로 너비가 25로 쓰입니다. 때로는 제대로 작동하지만 배경이 단순하지 않은 경우에는 작동하지 않습니다.

'클립'과 같은 모양이 필요합니다. 표준 그래픽 라이브러리를 사용하여 선호합니다. 대부분의 2 차원 그래픽 캔버스에 들어있는 도구가 더 우수합니다.

참고 : 나는 HTML 캔버스를 사용하고 있습니다,하지만 난 생각하지 않는다

• 그 문제에 대한 중요합니다.
• 경로를 위아래로 변환 할 수는 있지만 모든 곳에서 같은 거리를 유지할 수는 없습니다.
• 그래도 그라데이션 획으로 처리 할 수는 있지만 어떻게 작동하는지 잘 모르겠습니다.

Answer 1

HTML5 Canvas에서이 작업을 수행하는 방법을 생각해 볼 수 있습니다. 메모리 내 임시 캔버스에 을 - - 다음 적은 두께와 같은 곡선을 그리고 같은 캔버스에 destination-out에 globalCompositeOperation 세트 당신이 원하는 무엇

은 곡선을 그릴 것입니다.

그러면 원하는 모양을 얻을 수 있습니다. 본질적으로 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 * */{ 본체 폰트 패밀리 : 굴림, 돋움, 산세 리프; 글꼴 크기 : 85 %; 여백 : 10px 15px; color : # 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; 
}