javascript - 编写一个函数来绘制一个带有可选边的圆角矩形（与 CSS 相同）？

Question

我正在尝试为圆角矩形绘制路径，其中边是可选的，但有一些困难。我发现并看到了类似的问题，但这些函数要求提供现有的路径数据。我从头开始。

该函数如下所示：

function drawRoundRect(width, height, sides, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius) {
    pathData = "";
    return pathData;
}

如果我知道该怎么做，我就不会在这里问了。

用户可以说：

var myPath = drawRoundRect(100,100,"top left right", 10, 10, 10, 10);

它将创建一个具有三个边的矩形，其中矩形的底线未绘制。

或者对于一个完整的矩形，他们会这样写：

var myPath = drawRoundRect(100,100,"top left right bottom", 10, 10, 10, 10);

// top and bottom no rounded corners
var myPath = drawRoundRect(100,100,"top bottom", 0, 0, 0, 0);

Answer 1

您需要将 x 和 y 参数添加到函数的参数列表中，以便知道矩形的位置。

您需要对何时绘制角做出设计选择。绘制至少一个相邻边时是否是角？还是仅在绘制两个相邻边时才绘制角？

您需要将路径分成八部分：四条线（每边一条）和四条弧线（每个角一条）。这将要求您计算每边的两个点（即每种尺寸的线端点）。然后绕过矩形，将每个部分添加或跳过到路径数据中。使用线命令 (L|l|H|h|V|v) 添加线段。使用弧命令 (A|a) 添加弧段。使用移动命令 (M|m) 跳过部分。