- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试填充一个由矩形填充的圆形区域(准确地说,栅格宽度尺寸为 12x20)。
经过一些研究和实验,我找到了一个解决方案。要绘制一个圆,获取其边界框并遍历每个像素以发现距离小于或等于圆 R。
这里有一些代码示例,我使用的是 three.js
let shapeSize = [12, 20];
let circleR = R / 2;
let circle = new Circle(position, circleR);
let bounds = circle.bounds;
for (let i = bounds.x; i <= bounds.x + bounds.width; i += 1) {
for (let j = bounds.y; j <= bounds.y + bounds.height; j += 20) {
let center = new Point(i, j);
if (center.getDistance(position) <= circleR) {
center = new Point(i, j);
let shape = new Shape({center, alpha: 0.7, scale: 0.8});
j += shapeSize[1] - 1; // this part smells
}
}
}
形状为带支架的正方形 - 尺寸 12x20。
但是对于这个代码示例,不可能得到一个用正方形填充的圆。如果我增加 i+=12
和 y+=20
, 我周围的空间太多了,如果每个方 block 都在另一个方 block 之上,就会产生太多方 block 。
知道如何优雅地做到这一点吗?
最佳答案
正如 JJ23 所说,您可以将圆圈用作包含光栅网格的组的剪辑蒙版。
这是一个Sketch演示如何使用 Paper.js
实现。
// constants
var RADIUS = 200;
var IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAIAAAA2kktGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE82lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wOS0yNlQwOToxNDo0OSswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTYwZDg3MWYtZmFjOS0wYTRjLThmOGQtYjdmNDdhMGRiYzBlIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU2MGQ4NzFmLWZhYzktMGE0Yy04ZjhkLWI3ZjQ3YTBkYmMwZSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU2MGQ4NzFmLWZhYzktMGE0Yy04ZjhkLWI3ZjQ3YTBkYmMwZSIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTYwZDg3MWYtZmFjOS0wYTRjLThmOGQtYjdmNDdhMGRiYzBlIiBzdEV2dDp3aGVuPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+tv5OvAAAAiRJREFUKJFdks9qKjEUxs9JJk5GHdFBqEVBEAa6UHwA22codNeVWze+WR9CXHbRhZsqtP7BjjAYGWWs4+gkuYvI5XKzCt/5nZzvnBMkhCilAAAAOOe2bedyOUppkiRxHCulKKWWIRDR87xOp9NoNCilQRB8f3+fz+c0TSuVimXeKBQK/X7/9fU1CIK3t7fZbBaG4eVyQcTL5WIY8H3//f396+trOBzWajXHccrlsm3biEgIIQayLAsAFovFeDwWQriu2263Pc8DAK31rZwQYjKZMMbiONZaSylXq9XxeDQQJYRora/X63a73Ww28/k8TdM0TU+nU5qmt7bu7+/DMFRKMcYYY1mWcc5rtVqxWFwul1EUaa3J4+Mj5xwAsixLkoQx1m63X15eer2e0QGADgaDz89Pk4GIACCl/Pn5mUwmQgillNbauru7q1QqiKi1Nv6CIAiCQCll27bZh7Xf77MsAwBKKSJyzi3LklIqpZRSt1C9Xv/4+EiSpFgsIuL1epVSaq2zLCOE5HI5AEDf91erFWOsVCoBgFkF59x13Uaj4XnedDq11uu1ydvtdlprxpjrus1m8+npqdvtRlFEKUXbtvP5/OFwcBzH87zT6fT7++s4ju/71Wp1vV5HUYQPDw/7/V4I0Wq1np+fN5vNaDQKw9C0opSSUlpCiOPxiIjlcvl8PsdxLKU00zIX89sQAAghjDFjzgwQ/j0G+k8hhPzVOed/AJQ+QEC6tzaSAAAAAElFTkSuQmCC';
var IMAGE_WIDTH = 12;
var IMAGE_HEIGHT = 20;
// create image
var raster = new Raster(IMAGE);
// wait for image loading
raster.onLoad = function ()
{
// draw raster grid as a group
var group = new Group();
var stepsX = Math.ceil(RADIUS * 2 / IMAGE_WIDTH);
var stepsY = Math.ceil(RADIUS * 2 / IMAGE_HEIGHT);
for (var i = 0; i < stepsX; i++)
{
for (var j = 0; j < stepsY; j++)
{
// calculate grid point
var point = new Point(i * IMAGE_WIDTH, j * IMAGE_HEIGHT);
// clone original raster
var rasterClone = raster.clone();
// position it at grid point
rasterClone.position = point;
// add it to the group
group.addChild(rasterClone);
}
}
// draw circle
var circle = new Path.Circle(group.position, RADIUS);
// add it to the group as first child
group.insertChild(0, circle);
// enable clipping
group.clipped = true;
// position group at view center
group.position = view.center;
// delete original raster
raster.remove();
};
关于javascript - 圆圈在 paper.js 的 Canvas 上填充点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35904397/
我需要移动一个对象,在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示,字符串应该出现在另一个物体的后面,沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
我需要构建一个圆形(在 css 中),它有 2 行文本,可以根据选择的翻译改变长度并始终居中。 到目前为止我有这个: h3 { background-color: #fcd141; borde
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆,同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。 我几乎用正方形 div 做对了,但是一旦我将图像放入组合中,圆圈就会移动到图像下方。 我的代码。 .Container { w
使用 CSS,我有一个将图标放置在圆圈/圆盘中的显示。 这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。 我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时,圆圈是内联的,但我无法添加任何文本。当我使用 circle class 到 div 时,我可以添加文本,但
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是,progressBar 没有覆盖整个屏幕。相反,它被按钮覆盖。请引用屏幕截图,它应该更容易理解我的意思。 我要实现
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。 我有一个只有一个边框的圆圈,但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS,但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。 我试过: .circle { border: red; background-color: #FF
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。 我现在尝试的是使用这段代码: 它用我的背景图片绘制
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面,该页面将显示 SVG 圆数组,每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。 例如,如果 User1 在
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
使用 snapsvg.io,我想知道是否可以添加可点击的链接,例如 My Link标记到 SVG 文本、圆圈或线条。 我这里的一个例子是文本: var s = Snap("#svg"); var te
所以这是我的一个小项目,只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。 现在我认为我的代码非常成功,因为它工作正常(也许)。 但是有一个问题,圆比其他轴更倾向于向
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像?
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内,例如 更新: function createCircle(a) { var circle = document.
我希望圆圈类似于饼图,具有相同的不同颜色切片。出于某种原因,我画了一个圆,在带有颜色的一侧有弧形,中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
我有一个场景,我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表,图表的代码如下。 我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)? 我试过:simple_cycles → 它适用于 3 个节点,但不能超过 3 个。 我需要检测包含所有节
我是一名优秀的程序员,十分优秀!