我的代碼顯示了一個對角線，它應該不

我正在寫一個小日曆應用，現在在JavaScript和HTML5我的代碼顯示了一個對角線，它應該不

出於某種原因，畫出了事件的一個對角線，當我相信它應該是水平的。

任何幫助表示讚賞。

<!doctype html> 
<html> 
    <head> 
     <title>Calendar</title> 
    </head> 

    <body> 
     <canvas id="canvas" width="700" height="500"></canvas> 
     <script type="text/javascript"> 

function Event(start, end, name, text){ 
    this.start = start; 
    this.end = end; 
    this.name = name; 
    this.text = text; 
} 

function EventCollection(){ 
    this.events = []; 
    this.insert = function insert(event){ 
     // find position for event 
     var pos = 0; 
     for(var i=0; i<this.events.length && this.events[i].start < this.events[i].start; i++) 
      pos = i; 

     // insert event 
     this.events.splice(pos, 0, event); 
    } 

    this.get = function get(i){ 
     return this.events[i]; 
    } 

    this.length = function length(){ 
     return this.events.length; 
    } 
} 
var events = new EventCollection(); 
var currentTime = Date.now(); 
events.insert(new Event(currentTime + 60000, currentTime + 60000 * 5, "Meeting", "")); 
events.insert(new Event(currentTime + 60000 * 2, currentTime + 60000 * 10)); 

function displayEvent(events, i, scale, now, BORDER){ 
    var underlapping = 0; 
    for(var j=i; j>0 && events.get(j).end >= events.get(i); j++) 
     underlapping++; 

    var overlapping = 0; 
    for(var j=i; j<events.length() && events.get(j).start < events.get(i).end; j++){ 
     overlapping++; 
    } 

    var LAPPING_DISTANCE = 5; 

    beginX = BORDER + (events.get(i).start < now.getTime() ? 0 : BORDER + scale * (events.get(i).start - now.getTime())); 
    beginY = canvas.height/2 - (underlapping +2)* LAPPING_DISTANCE; 
    context.moveTo(beginX, beginY); 

    endX = (BORDER + (events.get(i).end - events.get(i).start)*scale < canvas.width - BORDER ? BORDER + (events.get(i).end - events.get(i).start)*scale : canvas.width); 
    endY = beginY; 
    context.lineTo(endX, endY); 
} 

function displayEvents(events, scale, now, BORDER){ 
    for(var i=0; i<events.length(); i++){ 
     displayEvent(events, i, scale, now, BORDER); 
    } 
} 

var visibleBegin = 0; 
var visibleEnd = 0; 

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

function draw(context, canvas, events, scale){ 
    var now = new Date(); 
    var BORDER = 10; 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(0, canvas.height/2); 
    context.lineTo(canvas.width, canvas.height/2); 

    // draw tickmark for now 
    var HALFTICKLENGTH = 10; 
    context.moveTo(10, canvas.height/2-HALFTICKLENGTH); 
    context.lineTo(10, canvas.height/2+HALFTICKLENGTH); 
    var hours = now.getHours(); 
    var minutes = now.getMinutes(); 
    context.fillText(hours + ":" + (minutes<10 ? "0" : "") + minutes, 10, canvas.height/2+20); 

    // draw events 
    displayEvents(events, 1, now); 

    // draw end date 
    context.moveTo(canvas.width - BORDER, canvas.height/2-HALFTICKLENGTH); 
    context.lineTo(canvas.width - BORDER, canvas.height/2+HALFTICKLENGTH); 

    context.strokeStyle = "#000"; 
    context.stroke(); 
    context.closePath(); 
} 

draw(context, canvas, events, 1); 

     </script> 
    </body> 
</html>

來源

2011-01-12 lowerkey

設置

var LAPPING_DISTANCE = -5;

或固定該線

beginY = canvas.height/2 - (underlapping + 2) * (-LAPPING_DISTANCE);

似乎是水平

來源

2011-01-12 14:43:48 stecb

我不知道爲什麼，但是修復它。謝謝！ – lowerkey 2011-01-12 14:56:44

不客氣。它會更改context.moveTo Y偏移量。使用負面研磨距離，偏移量似乎是錯誤的。 – stecb 2011-01-12 15:04:25

你有一個不匹配的context.beginPath()/context.stroke()對。匆匆一瞥，當我從draw函數調用displayEvents時，我會說它正在發生。

來源

2011-01-12 14:45:26 Sparafusile

我的代碼顯示了一個對角線，它應該不

回答

相關問題