Graphics 减少肥胖中风
我想画这个： 沿贝泽尔路径沿a的两条线，距离相等。粗线是我想要的，小点线是引导路径 上面的图像是通过首先以30的宽度抚摸路径，然后以与背景相同的颜色以25的宽度抚摸路径来完成的。这有时还可以，但如果背景不是纯色的话就不行了 我想要一个形状像“剪辑”的东西。我更喜欢使用标准的图形库。甚至更好的工具，来在大多数二维图形画布 注:Graphics 减少肥胖中风,graphics,canvas,2d,spline,stroke,Graphics,Canvas,2d,Spline,Stroke,我想画这个： 沿贝泽尔路径沿a的两条线，距离相等。粗线是我想要的，小点线是引导路径 上面的图像是通过首先以30的宽度抚摸路径，然后以与背景相同的颜色以25的宽度抚摸路径来完成的。这有时还可以，但如果背景不是纯色的话就不行了 我想要一个形状像“剪辑”的东西。我更喜欢使用标准的图形库。甚至更好的工具，来在大多数二维图形画布 注: 我使用的是HTML画布，但我认为这对问题并不重要 我可以上下转换路径，但这不会给我到中心的距离 也许可以用渐变笔划来完成，但我不确定它们是如何工作的 我可以想出一种在HT
- 我使用的是HTML画布，但我认为这对问题并不重要
- 我可以上下转换路径，但这不会给我到中心的距离
- 也许可以用渐变笔划来完成，但我不确定它们是如何工作的
globalCompositeOperationdestination out以下内容应该能更好地说明我的意思。需要添加一个简单的算法来根据控制点彼此的位置调整偏移。如果我有更多的时间，记住，我会加上它
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");
}
})();
这个问题虽然描述得很详细，但并不清楚。从编程上讲，它只是两条平行的贝塞尔样条线从源样条线偏移。Widget wise是一种“工具”，它将获取物理绘制的参考样条线并创建平行样条线。切利平？我不知道你在说什么，我不知道两边的贝泽家族。只有中间的那个。我不知道如何找到外部的。请看下面我的答案。你只需要知道中间的那个。哇，太棒了！我不知道canvas有这样的功能。它甚至也存在于PlayN中（我通过PlayN操纵canvas）：我担心这不起作用：两条线与中心的距离不相等，但可能非常接近，甚至交叉。是的，正如我提到的，这不是一个简单的解决方案；这只是解决方案的开始。需要添加缩放函数来调整控制点之间的偏移。如果我有时间，我会解决的。基本上，这是一个二维平面的2.5d解决方案。请看下面的解释。。。此外，d3.js lib对于偏移量缩放有很好的功能。这不是一个困难的问题，但偏移量缩放对编码来说是劳动密集型的，从零开始大约需要10小时。我用不同的语言做过几次。图形编程应该让你懂得数学。@Dtyree:d3.js的源代码中哪里有偏移量缩放代码？（我需要为canvas beziers实现它，因为我尝试允许可变厚度）谢谢
<!--
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ézier Example</title>
</head>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<body>
<h1>Canvas Bé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é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>
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;
}