Círculo a línea Únete a través de lienzo HTML5
https://stackoverflow.com/questions/7341630
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy tratando de unirme a cada círculo a través de la línea y mi código final lo hace, pero tiene algunos problemas de aligmento como ese:
Marcé algunas piezas de unión con Red Circle. No están correctamente alineados (la línea no está fuera del centro del círculo) como ve.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="graph" width="982" height="636" style="width:491px">
Tarayıcınız Canvas Desteklemiyor !
</canvas>
<script type="text/javascript">
var i = 0;
var lastCoord = new Array();
var c=document.getElementById("graph");
var cxt=c.getContext("2d");
function getParam(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function drawCircleAndLine(x, y)
{
cxt.fillStyle="#000000";
cxt.beginPath();
if(i == 0) cxt.arc(x, y, 9, 0, Math.PI*2, false);
else cxt.arc(x, y, 6, 0, Math.PI*2, false);
cxt.closePath();
cxt.fill();
if(i % 4 != 0)
{
cxt.lineWidth = 8;
cxt.lineTo(lastCoord[0], lastCoord[1]);
cxt.stroke();
}
else {
cxt.moveTo(lastCoord[0], lastCoord[1]);
cxt.lineTo(lastCoord[0], lastCoord[1]);
cxt.stroke();
}
lastCoord = [x, y];
i++;
}
var coords = {
0 : {
0 : {
"0" : { "x" : 50, "y" : 580},
"1" : { "x" : 50, "y" : 540},
"2" : { "x" : 50, "y" : 472},
"3" : { "x" : 50, "y" : 430},
"4" : { "x" : 50, "y" : 400},
"5" : { "x" : 50, "y" : 382},
"6" : { "x" : 50, "y" : 340},
"7" : { "x" : 50, "y" : 300},
"8" : { "x" : 50, "y" : 250},
"9" : { "x" : 50, "y" : 205},
"10" : { "x" : 50, "y" : 160},
"12" : { "x" : 50, "y" : 138},
"14" : { "x" : 50, "y" : 110},
"15" : { "x" : 50, "y" : 85},
"16" : { "x" : 50, "y" : 65},
"20" : { "x" : 50, "y" : 40}
},
1 : {
"0" : { "x" : 98, "y" : 555},
"1" : { "x" : 98, "y" : 493},
"2" : { "x" : 98, "y" : 451},
..............
"-4" : { "x" : 926, "y" : 356},
"-5" : { "x" : 926, "y" : 375},
"-6" : { "x" : 926, "y" : 398},
"-7" : { "x" : 926, "y" : 428},
"-8" : { "x" : 926, "y" : 452},
"-9" : { "x" : 926, "y" : 476},
"-10" : { "x" : 926, "y" : 500},
"-11" : { "x" : 926, "y" : 530},
"-12" : { "x" : 926, "y" : 550},
"-16" : { "x" : 926, "y" : 588}
}
}
};
var bg = new Image();
bg.src = "images/disc_graph_empty.jpg";
bg.onload = function() {
cxt.drawImage(bg, 0, 0);
try
{
drawCircleAndLine(coords[0][0][getParam('d1')]["x"], coords[0][0][getParam('d1')]["y"]);
drawCircleAndLine(coords[0][2][getParam('d2')]["x"], coords[0][3][getParam('d2')]["y"]);
drawCircleAndLine(coords[0][2][getParam('d3')]["x"], coords[0][2][getParam('d3')]["y"]);
drawCircleAndLine(coords[0][3][getParam('d4')]["x"], coords[0][3][getParam('d4')]["y"]);
drawCircleAndLine(coords[1][0][getParam('d5')]["x"], coords[1][0][getParam('d5')]["y"]);
drawCircleAndLine(coords[1][4][getParam('d6')]["x"], coords[1][5][getParam('d6')]["y"]);
drawCircleAndLine(coords[1][2][getParam('d7')]["x"], coords[1][2][getParam('d7')]["y"]);
drawCircleAndLine(coords[1][3][getParam('d8')]["x"], coords[1][3][getParam('d8')]["y"]);
drawCircleAndLine(coords[2][0][getParam('d9')]["x"], coords[2][0][getParam('d9')]["y"]);
drawCircleAndLine(coords[2][6][getParam('d10')]["x"], coords[2][7][getParam('d10')]["y"]);
drawCircleAndLine(coords[2][2][getParam('d11')]["x"], coords[2][2][getParam('d11')]["y"]);
drawCircleAndLine(coords[2][3][getParam('d12')]["x"], coords[2][3][getParam('d12')]["y"]);
}
catch(err)
{
alert('Hata Oluştu !\nBazı noktalar yerleşmemiş olabilir.\n\n\n' + err);
}
}
</script>
</body>
</html>
Todos los archivos: http://www.2shared.com/file/uyh2j0ni/canvas.html
Solución
Aquí hay una simplificación importante de su código que debería señalar cuál es el problema. Hice el relleno de azul claro y el ancho de trazo más pequeño para que pueda ver el problema. Solo llamo tu función dos veces:
drawCircleAndLine(100,100);
drawCircleAndLine(100,200);
Esperarías una línea directa, ¡pero claramente no va directo! Mira aquí:
Lo que está pasando es esto:
La primera vez, solo se está dibujando un círculo con un centro de 100,100. Esto es bueno
La segunda vez, se está dibujando un círculo en 200,200, y luego el final de la ruta en ese punto es la parte más derecha del círculo (que es aproximadamente 106,200). Luego está dibujando una línea de (106,200) a (100,100).
Para solucionar esto, puede agregar un comando, un moveTo(x, y) antes de su lineTo para que comiences la línea desde el lugar correcto. Mira aquí:
