- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
假设我有一个 Canvas ,在该 Canvas 上我有一个剪辑/路径/绘图,其形状为披萨片(一侧为圆形的三 Angular 形)。我想复制这些切片并将它们放在 Canvas 上,以便它们的点接触。就像我有这些三 Angular 形/切片之一,我想做这个:
披萨的中心位于 Canvas 的中心,如果这样更方便的话。我还可以将切片数量设置为 8,这样 3 次平移/翻转就可以达到目的。
如有必要,多个 Canvas 是可以的,但我认为有一种简单的方法可以做到这一点,但我只是没有想到。
我在这里开始了一些代码(抱歉,它在coffeescript中),但并不多:http://jsbin.com/qobogeponu/1/edit?html,js,output
同样欢迎使用 JS 进行回复。
任何有关如何在轴上翻转图像、旋转图像数据或任何您认为有帮助的线索,我们将不胜感激。感谢您的宝贵时间!
奖励点:我希望所有其他切片都沿着从披萨中心穿过切片中间绘制的轴翻转。
最佳答案
最简单的方法是添加一个圆(完整的弧)和所需的四条线。中风时具有良好的性能。
var ctx = canvas.getContext("2d"),
r = 190,
pi2 = Math.PI*2,
slices = 8,
slice = pi2 / slices;
ctx.translate(200.5, 200.5); // center (+0.5 to make sharper)
ctx.arc(0, 0, r, 0, 2*Math.PI);
for(var i = 0; i < slices*0.5; i++) { // count only 4 lines
ctx.moveTo(r*Math.cos(slice*i), r*Math.sin(slice*i));
ctx.lineTo(-r*Math.cos(slice*i), -r*Math.sin(slice*i));
}
ctx.lineWidth = 8;
ctx.stroke();
<canvas id="canvas" width=400 height=400></canvas>
另一种技术是使用子函数创建单个切片。如果您需要在某个点悬停或单击它,这非常有用,因为您可以重新生成路径并使用 isPointInPath() 来检查鼠标位置是否在内部,并重新着色等。
var ctx = canvas.getContext("2d"),
r = 190,
pi2 = Math.PI*2,
slices = 8,
slice = pi2 / slices;
ctx.beginPath(); // important when redrawing all, or checking for one slice
for(var i = 0; i < slices; i++) drawSlice(i); // all slices added to path
ctx.lineWidth = 8;
ctx.stroke();
// in this demo the function uses global, you can parametrize those if wanted
function drawSlice(index) {
ctx.translate(canvas.width * 0.5 + 0.5,
canvas.height * 0.5 + 0.5); // center (+0.5 to make sharper)
ctx.rotate(index * slice); // rotate accord. slice index
ctx.moveTo(0, 0); // line start in center
ctx.lineTo(r, 0); // to edge
ctx.arc(0, 0, r, 0, slice); // arc angle for one slice
ctx.closePath(); // line back to center and close
ctx.setTransform(1,0,0,1,0,0); // reset all transforms
}
ctx.fillStyle = "gold";
canvas.onmousemove = function(e) {
var r = canvas.getBoundingClientRect(), // correct the mouse pos
x = e.clientX - r.left,
y = e.clientY - r.top;
for(var i = 0; i < slices; i++) { // check each slice
ctx.beginPath(); // we need each single slice
drawSlice(i); // add the slice to path
if (ctx.isPointInPath(x, y)) { // inside the path?
ctx.fill(); // fill/stroke for demo
ctx.stroke();
}
}
};
<canvas id="canvas" width=400 height=400></canvas>
请注意,使用后一种技术时,边缘会过度绘制两次,这可能会产生更硬的边缘。您需要跳过一条边来避免这种情况。我把它作为练习留给 OP 来做。 :)
更新:现在,关于翻转、镜像等。然而,这通常被称为经典的高性能技术,因为无论如何你都需要使用路径、描边绘制至少四分之一的圆它等,有一个镜像的基础(因为我们无法访问位图的低级实现,也不能随意编译代码,使其在GPU上工作等等......)问题就变成了如果翻转副本确实更快,因为这将需要来自 JS 的额外调用,而不是在编译代码中使用浏览器内部进行抚摸。
但是可以做到:
var ctx = canvas.getContext("2d"),
r = 190,
pi2 = Math.PI * 2,
slices = 8,
slice = pi2 / slices;
ctx.beginPath(); // important when redrawing all, or checking for one slice
for (var i = 0; i < 2; i++) drawSlice(i); // all slices added to path
ctx.lineJoin = "round"; // avoid "spikes"
ctx.lineWidth = 8;
ctx.stroke();
ctx.scale(-1, 1); // mirror canvas hor.
ctx.translate(-canvas.width, 0); // move origin to other edge
ctx.drawImage(canvas, 0, 0); // draw hortizontal mirror
ctx.setTransform(1,0,0,1,0,0); // reset matrix
ctx.scale(1, -1); // mirror canvas vert.
ctx.translate(0, -canvas.height); // move origin to other edge
ctx.drawImage(canvas, 0, 0); // draw hortizontal mirror
// in this demo the function uses global, you can parametrize those if wanted
function drawSlice(index) {
ctx.translate(canvas.width * 0.5 + 0.5,
canvas.height * 0.5 + 0.5); // center (+0.5 to make sharper)
ctx.rotate(index * slice); // rotate accord. slice index
ctx.moveTo(0, 0); // line start in center
ctx.lineTo(r, 0); // to edge
ctx.arc(0, 0, r, 0, slice); // arc angle for one slice
ctx.closePath(); // line back to center and close
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset all transforms
}
<canvas id="canvas" width=400 height=400></canvas>
您可以使用setTransform()
在一行中设置缩放和平移,但我将它们分开显示,以便更容易看到发生了什么。
关于javascript - 如何复制粘贴 Canvas 的旋转部分而不重叠或多个 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27349603/
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档,我取得的大部分进展都是通过 GitHub issues 取得的。不,我不明白 HKT,所以没有帮助。 基本上,我在其他地方创建一个类型,ty
我必须创建一个正则表达式来搜索整个文件,以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是,它确实必须是单个正则表达式,并且它确实需要搜索
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
我有一个 if-else 语句,其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段 条件 2:ID 不匹配,所有字段均为空白。 ELSE 语句将它们全部填充 当我使条件
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分,以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题,但我似乎无法让 jsfiddl
这是我的情况: 我想使用 Google AdWords 的转换脚本,但出于某种原因,他们代码段的 javascript 部分在我的页面上添加了一些我似乎无法摆脱的不需要的空白。 所以我正在查看的选项纯
寻找一种优雅的方式在页面上添加一次脚本,就是这样。 我有一个需要 2 个 CSS 文件和 2 个 JS 文件的部分 View 。在大多数地方,只需要其中 1 个部分 View 。但在单个页面上,我需要
我想要一个网站,该网站始终具有相同的部分,具有相同的 id 以及我想要显示的所有内容。我对 javascript 不太了解,我想知道如何删除除特定部分之外的所有内容。 最好的方法是否是只执行一个循环来
SQL 语句教程 (11) Group By 我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (store_name)
我试图理解部分并认为我已经明白了。基本上,这是一种将部分应用程序应用于二元运算符的方法。所以我了解所有(2*) , (+1)等例子就好了。 但是在 O'Reilly Real World Haskel
有没有办法禁止在部分中覆盖给定的关键字参数?假设我要创建函数 bar总是有 a设置为 1 .在以下代码中: from functools import partial def foo(a, b):
我有这个使用节的 OpenMP 代码 #pragma omp parallel sections num_threads(8) { printf_s("Allo fro
我正在尝试重新创建 Apple 制作的有缺陷的 CNContactPickerViewController,因此我有一个数据数组 [CNContact],我需要将其整齐地显示在 UITableView
我有一个相对布局,其中包含一些 float 在 GridView 上的 TextView 。当我在网格中选择一个项目时,布局向下移动到屏幕的尽头,只有大约 1/5 的部分是可见的。这是使用简单的翻译动
我想在我的 tableView 中有两个部分。我希望将项目添加到第 0 节,然后能够选择一行以将其从第 0 节移动到第 1 节。到目前为止,我已将这些项目添加到第 0 节,但是当它关闭时数据不会加
我正在以自由职业者的身份开发支付控制软件,但我有一些关于 mysql 的问题。 。我有一个用作日志的表,名为“Bitacora”。在表中,我有一个名为 idCliente 的列,它是自己表中一个人的
我有一个 PFQueryTableViewController,我想向 tableview 添加部分,我这样尝试: - (PFQuery *)queryForTable { PFQuery *qu
我正在尝试编写一个查询,将部分匹配项与存储的名称值进行匹配。 我的数据库如下所示 Blockquote FirstName | Middle Name | Surname --------------
我正在开发一个语音备忘录应用程序,并且正在将文件保存到表格 View 中。我希望默认文件名显示为“新文件 1”,如果使用“新文件 1”,则它会显示为“新文件 2”,依此类推。 我正在尝试使用 do-w
我有以下简单的 HTML 布局 .section1 { background: red; } .section2 { background: green; } .section3 { ba
我是一名优秀的程序员,十分优秀!