0
당신의 도움이 필요합니다. 여기 내 코드에 문제가 있습니다. 여기서는 각 섹터와 라인 끝 부분에있는 선으로 채점 차트를 그리려합니다. 아이콘을 그리는 중이지만 불행히도 이미지가 올바른 위치에 그려지지 않으므로 이것이 내 코드이므로 도움이 필요합니다.내 코드가 캔버스의 잘못된 위치에 이미지를 그립니다.
<body>
<canvas id="chart" width=1000 height=900 style="background-color:#6d6363"> </canvas>
<script type="text/javascript">
var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");
function drawdountChart(canvas)
{
this.x , this.y , this.radius , this.lineWidth , this.strockStyle , this.from , this.to = null;
this.set = function(x, y, radius, from, to, lineWidth, strockStyle)
{
this.x = x;
this.y = y;
this.radius = radius;
this.from=from;
this.to= to;
this.lineWidth = lineWidth;
this.strockStyle = strockStyle;
}
this.drawImg = function(x , y , imagePath) // this is the function where I draw my image
{
var image = document.createElement("img");
image.src=imagePath;
image.onload=(function()
{
canvas.drawImage(image , x , y);
});
}
this.draw = function(data)
{
canvas.beginPath();
canvas.lineWidth = this.lineWidth;
canvas.strokeStyle = this.strockStyle;
canvas.arc(this.x , this.y , this.radius , this.from , this.to);
canvas.stroke();
var numberOfParts = data.numberOfParts;
var parts = data.parts;
var colors = data.colors;
var icons = data.icons;
var artPercentage = null;
var beginFrom = 0;
var currentX = null;
var currentY = null;
for(var i = 0; i<numberOfParts; i++)
{
percentage= parts[i]/this.radius;
canvas.beginPath();
canvas.lineWidth=30;
canvas.strokeStyle = colors[i];
canvas.arc(this.x , this.y ,this.radius , beginFrom , (Math.PI*2*percentage)+beginFrom , false);
var x_axis = (this.radius*Math.cos(beginFrom))+this.x;
var y_axis = (this.radius*Math.sin(beginFrom))+this.y;
var angleInDegree = beginFrom*57.3;
beginFrom = (Math.PI*2*percentage)+beginFrom;
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = 1;
if(angleInDegree>=270&&angleInDegree<360)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis-90);
canvas.lineTo(x_axis+190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i]); //calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=0&&angleInDegree<90)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis+150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis+150 , y_axis+90);
canvas.lineTo(x_axis+190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis+190 , y_axis-90 , icons[i]);//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=90&&angleInDegree<180)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis+90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis+90);
canvas.lineTo(x_axis-190 , y_axis+90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i]);//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}else
if(angleInDegree>=180&&angleInDegree<270)
{
canvas.moveTo(x_axis , y_axis);
canvas.lineTo(x_axis-150 , y_axis-90);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(x_axis-150 , y_axis-90);
canvas.lineTo(x_axis-190 , y_axis-90);
canvas.stroke();
this.drawImg(x_axis-190 , y_axis-90 , icons[i]);//calling for my drawImg function where I send the points where the line ends as a parameters and the path of the image to be drawn
}
}
}
}
var data =
{
numberOfParts: 5,
parts:[20, 20,65, 25 , 10],
colors:["red", "green", "blue", "yellow" , "orange" ],
comments:["comment1", "comment2", "comment3", "comment4" ],
icons:["images/fb.png", "images/fB.png", "images/fb.png", "images/fb.png", "images/fb.png"]
};
var drawDount = new drawdountChart(chart);
drawDount.set(400, 400, 140, 0, Math.PI*2, 30, "#FFF");
drawDount.draw(data);
</script>
</body>
이 결과는했지만, 그게 내가 당신이 필요로하는 무엇을 나는 그것의 라인
에 의해 수평 이동? 그런 다음 질문에 이미지를 추가하면 많은 도움이됩니다. – agrum
@agrum 질문에 추가했습니다. – Moh
@markE 제발 도와주세요. – Moh