Question

我正在编写一个小日历应用程序，现在用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>

Answer 1

设置

var LAPPING_DISTANCE = -5;

或修理此行

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

似乎是横向的

Answer 2

您的context.beginPath() / context.stroke()对不匹配。快速浏览一下，当您从displayEvents函数调用draw时，我会说这种情况正在发生。

我的代码显示了一个不应该的对角线

2 个答案: