我在画布上绘制和旋转图像时遇到问题 . 基本上,我的方法是创建财富之轮,允许基于阵列形式的奖品进行定制 . 此数组中的数据根据索引数构成车轮内的段 .
数据非常简单 . 它只是一个简单的JSON对象
var prizes = [
{product:"Axe FX", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"},
{product:"Musicman JPX", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"},
{product:"Ibanez JEM777V", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"}
];
此数据用于创建车轮内的段 . 所以我想把目前正在运作的文字放在我身上 .
绘制轮子时,我分为两个主要功能 . 一个用于绘制轮子,另一个用于绘制轮子内的段 .
var drawPartial = function(key, lastAngle, angle) {
var value = prizes[key].product;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
ctx.fillStyle = segColors[key];
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size, lastAngle, angle);
ctx.lineTo(centerX, centerY);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate((lastAngle+angle) / 2);
ctx.fillStyle = "#000";
ctx.fillText(value.substr(0,20), size / 2 + 20, 0);
ctx.restore();
ctx.restore();
}
var draw = function() {
var len = prizes.length;
var currentAngle = outCurrentAngle;
var lastAngle = currentAngle;
ctx.strokeStyle = '#000000';
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = "1.4em Arial";
for(var i = 1; i <= len; i++) {
var angle = (Math.PI*2) * (i/len) + currentAngle;
drawPartial(i-1, lastAngle, angle);
lastAngle = angle;
}
ctx.beginPath();
ctx.lineWidth = 2;
ctx.fillStyle = "#fff";
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size/7, 0, Math.PI*2);
ctx.closePath();
// ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(centerX, centerY, size, 0, Math.PI*2);
ctx.closePath();
// ctx.stroke();
}
使用上面的代码,我只需简单地调用draw()函数和滚轮,并相应地创建所有段 . 但是,我想在每个段中绘制图像,但我不知道它是否有效 . 这是对drawPartial()的修改,用于渲染图像和文本
var drawPartial = function(key, lastAngle, angle) {
var value = prizes[key].product;
var img = new Image();
img.src = prizes[key].img;
img.onload = function() {
ctx.save();
ctx.drawImage(img,centerX,centerY);
ctx.save();
ctx.translate(centerX,centerY);
ctx.rotate((lastAngle+angle) / 2);
ctx.drawImage(img,centerX,centerY);
ctx.restore();
ctx.restore();
}
ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
ctx.fillStyle = segColors[key];
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size, lastAngle, angle);
ctx.lineTo(centerX, centerY);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate((lastAngle+angle) / 2);
ctx.fillStyle = "#000";
ctx.fillText(value.substr(0,20), size / 2 + 20, 0);
ctx.restore();
ctx.restore();
}
您可以看到我基于prizes对象添加图像及其src,该对象应该在主draw()函数调用的每次迭代中调用,但它永远不会在任何段中呈现任何图像 .
我想要的是 . 在drawPartial()的每次迭代中,我希望图像与文本一起放在段中并根据角度旋转 .
请帮忙...
1 回答
Problem
在你的
img.onload
功能中,你是_x438383_你的中心X和中心 .ctx.translate(centerX,centerY)
将画布的[0,0]原点移动到[centerX,centerY] .因此,当你绘制你的图像时,你真的是双重移动 .
因此,您的图像实际上是在
[ centerX*2, centerY*2 ]
绘制的 .A additional thought: Preload your images
最好预加载所有图像 . 这样,如果图像无法加载,您可以在开始绘制轮子之前采取修复操作 .
以下是如何预加载所有图像,以便在需要将它们绘制到轮子上时可用:
I had this laying around...
我看到你已经有代码来绘制你的Wheel了,但是我的代码存档中有这个代码所以我在这里提供它以防万一它对你有用 .
以下是如何使用包含奖品图像和文字的每个刀片绘制“财富之轮”的示例 . 使用的技术包括:
context.translate
将旋转点设置为车轮中心 .context.rotate
将每个刀片旋转到所需的角度 .context.textAlign
&context.textBaseline
绘制居中文字 .context.globalAlpha
减轻每个刀片的颜色,使黑色文字具有良好的对比度 .