PDF云注释背后的算法是什么？
Lai*_*ith 8 c# pdf algorithm graphics 2d
我注意到几个PDF Annotation应用程序(Adobe Acrobat,Bluebeam等)都有一个算法,用于围绕多边形创建云模式:
拖动此多边形的顶点时,将重新计算云模式:
注意如何重新计算弧以包围多边形.它们不会被拉伸或扭曲.无论用什么算法来定义它似乎都是行业标准.有几个PDF编辑器允许您创建它,并且在每个编辑器中,拖动顶点时云弧看起来都相同.
我正在尝试创建一个复制它的WPF示例应用程序,但我似乎无法在任何地方找到生成云模式的文档.
我对图形设计和2D编程非常流利,而且我能够创建拖动顶点的工具,但是我需要帮助来弄清楚如何绘制这些弧.它看起来像一个系列ArcSegments的PathGeometry.
所以我的问题是,在多边形周围创建这些弧的算法是什么？
要么
在哪里可以找到这些行业标准PDF模式,图纸和/或注释的文档？(云,箭头,边界等)
M O*_*ehm 14
草图中的云只是沿着每个多边形边缘绘制的一系列圆圈,具有一定的重叠.
绘制填充的基本云形状的简单方法是首先填充多边形,然后在填充多边形的顶部绘制圆.
当你想用部分透明的颜色填充云时,这种方法会变得平坦,因为圆与彼此和基本多边形的重叠将被绘制两次.它也会错过云曲线上的小卡通式超调.
绘制云的更好方法是首先创建所有圆,然后确定每个圆与其下一个邻居的交叉角.然后,您可以创建一个包含圆弧段的路径,您可以填充该路径.轮廓由独立弧组成,末端角度偏移小.
在您的示例中,云弧之间的距离是静态的.通过使该距离可变并且通过强制多边形边缘可被该距离均匀地整除,可以容易地使多边形顶点处的弧重合.
JavaScript中的示例实现(没有多边形拖动)如下所示.我不熟悉C#,但我认为基本算法很清楚.代码是一个完整的网页,您可以在支持画布的浏览器中保存和显示; 我在Firefox中测试过它.
绘制云的功能采用选项对象,例如半径,弧距和以度为单位的过冲.我没有测试像小多边形这样的退化情况,但在极端情况下,算法应该只为每个多边形顶点绘制一个弧.
必须顺时针定义多边形.否则,云将更像是云层中的一个洞.如果角落弧周围没有任何人工制品,这将是一个很好的功能.
编辑:我已经为下面的云算法提供了一个简单的在线测试页面.该页面允许您使用各种参数.它也很好地显示了算法的缺点.(在FF和Chrome中测试过.)
当未正确确定起始角和结束角时,会出现伪影.对于非常钝的角度,角落旁边的弧线之间也可能存在交叉点.我没有解决这个问题,但我也没有给出muczh的想法.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cumulunimbus</title>
<script type="text/javascript">
function Point(x, y) {
this.x = x;
this.y = y;
}
function get(obj, prop, fallback) {
if (obj.hasOwnProperty(prop)) return obj[prop];
return fallback;
}
/*
* Global intersection angles of two circles of the same radius
*/
function intersect(p, q, r) {
var dx = q.x - p.x;
var dy = q.y - p.y;
var len = Math.sqrt(dx*dx + dy*dy);
var a = 0.5 * len / r;
if (a < -1) a = -1;
if (a > 1) a = 1;
var phi = Math.atan2(dy, dx);
var gamma = Math.acos(a);
return [phi - gamma, Math.PI + phi + gamma];
}
/*
* Draw a cloud with the given options to the given context
*/
function cloud(cx, poly, opt) {
var radius = get(opt, "radius", 20);
var overlap = get(opt, "overlap", 5/6);
var stretch = get(opt, "stretch", true);
// Create a list of circles
var circle = [];
var delta = 2 * radius * overlap;
var prev = poly[poly.length - 1];
for (var i = 0; i < poly.length; i++) {
var curr = poly[i];
var dx = curr.x - prev.x;
var dy = curr.y - prev.y;
var len = Math.sqrt(dx*dx + dy*dy);
dx = dx / len;
dy = dy / len;
var d = delta;
if (stretch) {
var n = (len / delta + 0.5) | 0;
if (n < 1) n = 1;
d = len / n;
}
for (var a = 0; a + 0.1 * d < len; a += d) {
circle.push({
x: prev.x + a * dx,
y: prev.y + a * dy,
});
}
prev = curr;
}
// Determine intersection angles of circles
var prev = circle[circle.length - 1];
for (var i = 0; i < circle.length; i++) {
var curr = circle[i];
var angle = intersect(prev, curr, radius);
prev.end = angle[0];
curr.begin = angle[1];
prev = curr;
}
// Draw the cloud
cx.save();
if (get(opt, "fill", false)) {
cx.fillStyle = opt.fill;
cx.beginPath();
for (var i = 0; i < circle.length; i++) {
var curr = circle[i];
cx.arc(curr.x, curr.y, radius, curr.begin, curr.end);
}
cx.fill();
}
if (get(opt, "outline", false)) {
cx.strokeStyle = opt.outline;
cx.lineWidth = get(opt, "width", 1.0);
var incise = Math.PI * get(opt, "incise", 15) / 180;
for (var i = 0; i < circle.length; i++) {
var curr = circle[i];
cx.beginPath();
cx.arc(curr.x, curr.y, radius,
curr.begin, curr.end + incise);
cx.stroke();
}
}
cx.restore();
}
var poly = [
new Point(250, 50),
new Point(450, 150),
new Point(350, 450),
new Point(50, 300),
];
window.onload = function() {
cv = document.getElementById("cv");
cx = cv.getContext("2d");
cloud(cx, poly, {
fill: "lightblue", // fill colour
outline: "black", // outline colour
incise: 15, // overshoot in degrees
radius: 20, // arc radius
overlap: 0.8333, // arc distance relative to radius
stretch: false, // should corner arcs coincide?
});
}
</script>
</head>
<body>
<canvas width="500" height="500" id="cv"></canvas>
</body>
</html>
- 到目前为止,这是我在StackOverflow上收到的最佳响应.我希望我能为这项令人难以置信的努力给你更多积分.您的代码结构合理,易于理解,无可否认令人印象深刻!谢谢,M Oehm. (2认同)
| 归档时间： |
|
| 查看次数： |
544 次 |
| 最近记录： |