三角形路径的弯曲边？

发布于 2024-10-31 08:25:46 字数 317 浏览 0 评论 0原文

我正在画布上画一个三角形，类似于：

canvas.moveTo(0, 30);
canvas.lineTo(40, 0);
canvas.lineTo(40, 40);
canvas.lineTo(40, 40);
canvas.lineTo(0, 30);

并在画布上得到正确的三角形。但我需要稍微弯曲侧面并用特定的颜色填充该路径。做到这一点最简单的方法是什么？画圆弧？但如何填充对象呢？

这就是我需要得到的

谢谢！

原文

I am drawing a triangle on a Canvas, something like:

canvas.moveTo(0, 30);
canvas.lineTo(40, 0);
canvas.lineTo(40, 40);
canvas.lineTo(40, 40);
canvas.lineTo(0, 30);

And get proper triangle on my Canvas. But I need to curve the sides a little and fill that path with specific color. What is the easiest way to do this? Drawing arcs? But how to fill the object?

This is what I need to get

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唔猫 2024-11-07 08:25:46

编辑：我注意到您使用的是 android 的画布，而不是 HTML Canvas，抱歉。概念完全相同，只是您将调用 quadTo() 而不是 quadraticCurveTo()，因此我的示例仍然可以帮助您继续下去。

同样在 Android 上，您可以使用canvas.drawPath(path,paint)并传入一个Paint，其Paint.style设置为FILL_AND_STROKE。

您需要构造路径，fill() 它，然后 lines() 它，以便获得带有笔划轮廓的填充路径。

要获得该特定形状，最简单的方法是绘制两条二次曲线。二次曲线首先需要控制点 x,y，然后是终点 x,y。两条曲线的控制点应位于所需三角形的中间附近。这是一个示例：

ctx.fillStyle = "lightgray";

ctx.moveTo(0, 100);
ctx.quadraticCurveTo(50, 50, 50, 0);
ctx.quadraticCurveTo(50, 50, 100, 100);
ctx.lineTo(0, 100);
ctx.fill();
ctx.stroke();

这是为您提供的示例。

EDIT: I noticed you were using android's canvas, not HTML Canvas, sorry. The concept is exactly the same except you'll call quadTo() instead of quadraticCurveTo(), so my example should still get you going.

Also on android you use canvas.drawPath(path, paint) and pass in a paint that has its Paint.style set to FILL_AND_STROKE.

You will want to construct the path, fill() it, then stroke() it in order to get both a filled path with the stroke outline.

To get that particular shape, the easiest way is to draw two quadratic curves. A quadratic curve first needs a control point x,y then the end point x,y. The control point for both curves should be around the middle of your desired triangle. Here is an example:

ctx.fillStyle = "lightgray";

ctx.moveTo(0, 100);
ctx.quadraticCurveTo(50, 50, 50, 0);
ctx.quadraticCurveTo(50, 50, 100, 100);
ctx.lineTo(0, 100);
ctx.fill();
ctx.stroke();

Here is that example live for you.

回复收藏 0 原文

~没有更多了~