甘特圖時間軸像素

Question

您好，我已經嘗試了幾天，我希望有人可以對情況有所了解。

我一直在嘗試編寫一個學習項目。 目標基本上是一個甘特圖，在這里我想最終繪制一些事件。

我正在畫布上繪制時間線，現在我將“第二”線以50px的間隔繪制，它們之間的4條較短的線代表200ms的空間。 enter code here

 var aTime = "00:1:00.0"; var h, m, s, ms, totalSeconds, thecanvas = null; // within the loop at line 76 I'm trying ( i * secondsSpacing ) to get the X //position to draw the lines for each second. //Why would this not drawing the lines 50 pixels apart? var secondsSpaceing = 50; var spaceTime = 44; var mousePositioning = { x:0, y:0}; var zoom1a = 1; function drawStroke(sX, sY, eX, eY, color) { thecontext.strokeStyle=color; thecontext.lineWidth=1; thecontext.beginPath(); thecontext.moveTo(sX,sY); thecontext.lineTo(eX,eY); thecontext.stroke(); } function secToMinSec(seconds) { var min = Math.floor(seconds / 60); var sec = Math.ceil(seconds % 60); sec = (sec < 10) ? "0" + sec : sec; return new Array(min, sec); } var mouseXY = function(eve) { if(!eve) var eve = window.event; var totalOffsetX = 0; var totalOffsetY = 0; var canvasX = 0; var canvasY = 0; var canvas = this; do{ totalOffsetX += canvas.offsetLeft; totalOffsetY += canvas.offsetTop; } while(canvas = canvas.offsetParent) canvasX = eve.pageX - totalOffsetX; canvasY = eve.pageY - totalOffsetY; return {'x':canvasX, 'y':canvasY} } $(document).ready(function() { thecanvas = document.getElementById("thecanvas"); thecontext = thecanvas.getContext("2d"); HTMLCanvasElement.prototype.xy = mouseXY; $(thecanvas).mousemove(function(e) { mousePositioning = thecanvas.xy(e); $("#output").html( "X = " + mousePositioning.x + "<br> Y = " + mousePositioning.y ); }); var splitTimeStrMS = aTime.split('.'); var splitTimeStr = splitTimeStrMS[0].split(':'); h = parseInt(splitTimeStr[0]); m = parseInt(splitTimeStr[1]); s = parseInt(splitTimeStr[2]); ms = parseFloat(splitTimeStrMS[1]); var X = 60; totalSeconds = (h * X * X) + (m * X) + s; var divided = Math.ceil(totalSeconds / zoom1a); var timeChartArray = new Array(); for(var i = 0; i <= divided; i++) { timeChartArray.push(i * zoom1a); } var neededCanvasWidth = Math.ceil(timeChartArray.length * secondsSpaceing); var timeStr = null; var lineColor = "#000000"; if(neededCanvasWidth > ($("#thecanvas").attr("width"))) { $("#thecanvas").attr("width", neededCanvasWidth); thecontext.font="normal 12px Arial"; thecontext.fillStyle = lineColor; for(var i = 0; i < timeChartArray.length; i++) { //draw the line var xline = parseFloat(i * secondsSpaceing); drawStroke(xline, 0, xline, 8, lineColor); //draw the time text var timeStr = secToMinSec( timeChartArray[i] ); var timeFormatted = timeStr[0] + ":" + timeStr[1]; var timeXpos = (xline - 10); if(timeFormatted != "0:00") { thecontext.fillText(timeFormatted, timeXpos,24); } } } }); 

 #canvasOut {position:relative; width:100%; width:700px; background:#222222; overflow:visible; } #thecanvas {position:relative; height:140px; background:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="canvasOut"> <canvas width="200" id="thecanvas"></canvas> </div> <div id="output"> </div> <div id="output2"> </div> 

如果將鼠標移到一秒標記上，您會看到它在x：50處，兩秒標記是x：100，但是三秒標記是x：149，相同的模式繼續，並且我不斷丟失秒數。 到第五秒，它應該在x：250，但丟失了兩秒鍾，是x：248。 我仍在嘗試自己弄清楚這一點，但希望有人能從中發現一些令人沮喪的信息。 謝謝閱讀。

編輯 ：代碼段在編輯器中工作，但是當我按下“運行代碼段”按鈕時，我注意到它沒有像在編輯器以及jsFiddle中那樣顯示鼠標位置。

這是jsFiddle上項目的鏈接：

https://jsfiddle.net/4y0q2pdw/19/

再次感謝

Answer 1

檢查一下，我發現函數每1秒減去4px。 所以我更換了

var xline = parseFloat(i * secondsSpaceing);

與

 var xline =parseFloat((i * secondsSpaceing)+3.6*i);

最初我設置的不是整數4而不是3.6，但是函數在8秒的行之后添加了1或2px，所以為了更准確，我將3.6替換為更准確的4。