如何在每个矩形切片中放置类别标题和徽标？

Question

我做了一个长方形，分成了13个部分，如图SS。切片的数量可以改变。例如，要创建 14 个切片，我只使用公式 360/14。

虽然我已经尽可能多地绘制切片，但我无法确定每个切片中可以容纳多少个徽标及其对应的坐标。重要的是要注意徽标不应触及每个切片的边界线。

你能帮我确定每个切片可以容纳的最大徽标数量并找到它们的坐标吗？

假设每个徽标尺寸为 40*40。

我使用 html5 canvas 和 javascript 绘制了矩形和切片。这是绘制这个的代码

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Define categories
        const categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5', 'Category 6', 'Category 7', 'Category 8', 'Category 9', 'Category 10', 'Category 11', 'Category 12'];

        // Draw the rectangular box
        ctx.beginPath();
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.stroke();

        // Draw the lines from the center of the box
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const lineLength = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2)); // Long enough to touch the edges
        const numLines = 12;
        const angleStep = 360 / numLines;
        for (let i = 0; i < numLines; i++) {
            const angle = angleStep * i;
            const radians = angle * Math.PI / 180;
            const endX = centerX + lineLength * Math.cos(radians);
            const endY = centerY + lineLength * Math.sin(radians);
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(endX, endY);
            ctx.stroke();

            // Add category title to each slice
            const titleX = centerX + (lineLength / 2) * Math.cos(radians);
            const titleY = centerY + (lineLength / 2) * Math.sin(radians);
            ctx.font = "10px Arial";
            ctx.fillText(categories[i], titleX, titleY);
        }
    </script>
</body>

</html>

如何在每个矩形切片中放置类别标题和徽标？

问题描述投票：0回答：0

最新问题

如何在每个矩形切片中放置类别标题和徽标？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0