当前位置： 文江博客话题详情

我的代码在不应该显示的地方显示了对角线

发布于 2024-10-11 11:58:47 字数 3379 浏览 1 评论 0原文

我正在编写一个小日历应用程序，目前使用 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>
原文

I'm writing a little calendar application, for now in javascript and html5

For some reason, there is a diagonal drawn for one of the events, when I believe it should be a horizontal.

Any help is appreciated.

<!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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

小耗子 2024-10-18 11:58:47

设置

var LAPPING_DISTANCE = -5;

或固定这条线

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

似乎是水平的

setting

var LAPPING_DISTANCE = -5;

or fixing this line

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

seems to be horizontal

回复 原文
银河中√捞星星 2024-10-18 11:58:47

您的 context.beginPath() / context.lines() 对不匹配。乍一看，我会说当您从 draw 函数调用 displayEvents 时就会发生这种情况。

You have a mismatched context.beginPath() / context.stroke() pair. At a quick glance, I'd say it was happening when you call displayEvents from the draw function.

回复 原文
~没有更多了~

关于作者

暖阳

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

ni139999

文章 0 评论 0

Smile

文章 0 评论 0

木子李

文章 0 评论 0

仅此而已

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

内心激荡

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文