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);

最初我设置而不是3.6整数4，但是在8秒行之后添加了1或2px的函数。为了更准确，我将4乘以3.6更准确。

甘特图时间轴像素

1 个答案: