在每个矩形中创建 9 个圆（每个角 4 个，侧面 4 个，中间 1 个）同时/立即创建一个矩形
Posted
技术标签:
【中文标题】在每个矩形中创建 9 个圆（每个角 4 个，侧面 4 个，中间 1 个）同时/立即创建一个矩形【英文标题】：Creating 9 circles in each rectangle (4 in each corner, 4 on the sides and 1 in the middle) at the same time/after immediately creating a rectangle 【发布时间】：2021-12-15 13:56:08 【问题描述】：我有一个挑战，我试图在每个矩形中创建 9 个圆（每个角 4 个，侧面 4 个，1 个 在中间）立即创建一个矩形后的同一时间。在我的方法中，用一个矩形创建了 4 个圆，这是不需要的！
每个矩形应同时包含 9 个圆（每个角 4 个，边 4 个，中间 1 个） 将被创建。 更准确地说，在创建每个矩形时需要同时有 9 个圆。 我使用snap.svg 库来创建圆形和矩形。 您可以使用以下代码 sn-p。const svgId = 'campus_map';
const width = document.getElementById(svgId).viewBox.baseVal.width;
const height = document.getElementById(svgId).viewBox.baseVal.height;
let draw = Snap("#tiles");
let c = 0;
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];
let svg = document.getElementById(svgId);
for (let i = 0; i <= width; i = i + size)
for (let j = 0; j <= height; j = j + size)
c += 1;
let rect = draw.rect(i, j, size, size);
let circle1 = draw.circle(i, j, circleSize);
let circle2 = draw.circle(i + (size / 2), j, circleSize);
let circle3 = draw.circle(i, j + (size / 2), circleSize);
let circle4 = draw.circle(i + (size / 2), j + (size / 2), circleSize);
rect.attr(
fill: "#d00bf3",
"fill-opacity": 0.2,
stroke: "#000",
"stroke-width": "1px",
id: "rect_" + c,
name: "rect" + c
);
circle1.attr(
fill: circleColor[0],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle1_" + c,
name: "circle1_" + c
);
circle2.attr(
fill: circleColor[1],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle2_" + c,
name: "circle2_" + c
);
circle3.attr(
fill: circleColor[2],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle3_" + c,
name: "circle3_" + c
);
circle4.attr(
fill: circleColor[3],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle4_" + c,
name: "circle4_" + c
);
<script src="https://unpkg.com/snapsvg@0.5"></script>
<svg viewBox="0 0 8204.08 6413.17" version="1.1" id="campus_map"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g id="tiles"></g>
</svg>【问题讨论】：
您只创建了四个圈子。您是否尝试过创建其他圈子？您对创建其他圈子有什么特别的困扰吗？ 我试过了，但不能在矩形中同时创建9个圆。 我知道这是一项艰巨的任务。 请将您的代码贴在您创建九个圆圈的位置。 你的意思是不能被创建。你有错误吗？没有出现圆圈吗？还是 4？我们需要您尝试过的更多详细信息 【参考方案1】：在您的循环中，您只能为每个图块创建四个圆圈。如果您再添加五个，您的代码将起作用。是什么阻止你这样做？
听起来您希望圆圈位于正方形内。为此，您需要将圆移动一个圆半径。
这是一些修改后的代码，我在其中计算偏移量并使用循环来定位九个圆。
const svgId = 'campus_map';
const width = document.getElementById(svgId).viewBox.baseVal.width;
const height = document.getElementById(svgId).viewBox.baseVal.height;
let draw = Snap("#tiles");
let c = 0;
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];
let svg = document.getElementById(svgId);
for (let i = 0; i <= width; i = i + size)
for (let j = 0; j <= height; j = j + size)
c += 1;
let rect = draw.rect(i, j, size, size);
rect.attr(
fill: "#d00bf3",
"fill-opacity": 0.2,
stroke: "#000",
"stroke-width": "1px",
id: "rect_" + c,
name: "rect" + c
);
// Now have another loop to create the nine circles.
// It sounds like you want to have the circle INSIDE the rectangle
// so you need to move the away from the rectangle corners by
// the radius (circleSize).
// The distance between the circles is the square size - two radiuses
// then divided in half
let circleSpacing = (size - circleSize * 2) / 2;
// Top left circle is one radius inside the top left square corner
let circleStartX = i + circleSize;
let circleStartY = j + circleSize;
for (let i2 = 0; i2 < 3; i2++)
for (let j2 = 0; j2 < 3; j2++)
c += 1;
let circle = draw.circle(circleStartX + i2 * circleSpacing, circleStartY + j2 * circleSpacing, circleSize);
circle.attr(
fill: circleColor[0],
"fill-opacity": 1,
stroke: "#000",
"stroke-width": "1px",
id: "circle1_" + c,
name: "circle1_" + c
);
<script src="https://unpkg.com/snapsvg@0.5"></script>
<svg viewBox="0 0 8204.08 6413.17" version="1.1" id="campus_map"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g id="tiles"></g>
</svg>【讨论】：
【参考方案2】：考虑使用patternSVG
这是您的应用程序最简单的解决方案。 您可以随时轻松更改其内容。 您还可以使用图案填充任何形状的容器并使其具有响应性。
请查看 cmets 以了解如何定位图案元素。
<svg version="1.1" viewBox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg" >
<defs>
<pattern id="myPattern"
x="0" y="0"
patternUnits="userSpaceOnUse" >
<rect x="0" y="0" fill="#F6CEFD" stroke- stroke="black" />
<g stroke="none" >
<!-- Central circle -->
<circle cx="20" cy="20" r="3" fill="#0051FF"/>
<!-- Top mid circle -->
<circle cx="20" cy="0.5" r="3" fill="#000000"/>
<!-- Bottom mid circle -->
<circle cx="20" cy="40" r="3" fill="000"/>
<!-- left middle circle -->
<circle cx="0" cy="20" r="3" fill="#00FFE1"/>
<!-- right middle circle -->
<circle cx="40" cy="20" r="3" fill="#00FFE1"/>
<!-- upper left corner -->
<circle cx="0" cy="0" r="3" fill="#FF0000"/>
<!-- upper bottom corner -->
<circle cx="0" cy="40" r="3" fill="#FF0000"/>
<!-- top right corner -->
<circle cx="40" cy="0" r="3" fill="#FF0000"/>
<!-- bottom right corner -->
<circle cx="40" cy="40" r="3" fill="#FF0000"/>
</g>
</pattern>
</defs>
<rect x="0" y="0"
style="stroke: #000000; fill: url(#myPattern);" />
</svg>用图案填充圣诞树的示例
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 267 347" >
<defs>
<pattern id="myPattern"
x="0" y="0" patternUnits="userSpaceOnUse" >
<rect x="0" y="0" fill="green" stroke- stroke="black" />
<g stroke="none" >
<!-- Central circle -->
<circle cx="20" cy="20" r="3" fill="#0051FF"/>
<!-- Top mid circle -->
<circle cx="20" cy="0.5" r="3" fill="gold"/>
<!-- Bottom mid circle -->
<circle cx="20" cy="40" r="3" fill="gold"/>
<!-- left middle circle -->
<circle cx="0" cy="20" r="3" fill="#00FFE1"/>
<!-- right middle circle -->
<circle cx="40" cy="20" r="3" fill="#00FFE1"/>
<!-- upper left corner -->
<circle cx="0" cy="0" r="3" fill="#FF0000"/>
<!-- upper bottom corner -->
<circle cx="0" cy="40" r="3" fill="#FF0000"/>
<!-- top right corner -->
<circle cx="40" cy="0" r="3" fill="#FF0000"/>
<!-- bottom right corner -->
<circle cx="40" cy="40" r="3" fill="#FF0000"/>
</g>
</pattern>
</defs>
<!-- filling a Christmas tree with a pattern -->
<path id="path4146" d="m119 262 28 0 0 86-28-2z" fill="brown" />
<path id="tree" fill="url(#myPattern)" d="M261 327 169 244c16 9 103 34 76 15-25-18-81-74-81-74 8 5 94 45 71 27-24-19-78-88-78-88 7 5 42 11 42 11-24-13-47-73-47-73 11 8 21 7 21 7C149 51 133 0 133 0c0 0-15 51-39 69 0 0 9 1 21-7 0 0-23 60-47 73 0 0 35-7 42-12 0 0-38 58-78 89-20 15 61-23 69-28 0 0-25 38-75 85-14 14 63-13 72-25 0 0-70 64-88 86-6 7 123-56 123-56 0 0 133 70 129 52z" id="path4" fill="#008000"/>
</svg>【讨论】：
以上是关于在每个矩形中创建 9 个圆（每个角 4 个，侧面 4 个，中间 1 个）同时/立即创建一个矩形的主要内容，如果未能解决你的问题，请参考以下文章