1

我需要一个脚本在画布红色框中与右侧的 html-table-tds 并排绘制...

它是如何完成的：http: //jsfiddle.net/KaDnQ/1/

html:

<table border="1">
<tr>
    <td valign="top">
        <table class="t2" border="1">
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        </table>
    </td>
    <td valign="top"><canvas id="x"></canvas></td>
</tr>
</table>

CSS：

body {
    margin: 30px;
}

.t2 {
    border-collapse: collapse;
    border-spacing: 0;
}

.t2 td {
     padding: 5px;
     text-align: center;
}

canvas {
    border: 1px dashed green;
}

JS：

var canvasWidth = $(".t2").outerWidth()*3;
var canvasHeight = $(".t2").outerHeight();
var c = document.getElementById("x");
var c2 = c.getContext("2d");

c.width = canvasWidth;
c.height = canvasHeight;

$('.t2 td:odd').each(function() {

    var cur = $(this);
    var topOffset = 0;
    var shouldCount = true;
    var h = $(this).outerHeight();

    $('.t2 td').each(function() {    
        if (shouldCount) {
            topOffset += h;

            if (cur.is(this)) {
                topOffset -= h;
                shouldCount = false;
            }
        }
    });

    c2.fillStyle = '#f00';
    c2.beginPath();
    c2.moveTo(0, topOffset);
    c2.lineTo(25, topOffset);
    c2.lineTo(25, topOffset+h);
    c2.lineTo(0, topOffset+h);
    c2.closePath();
    c2.fill();
});

http://jsfiddle.net/KaDnQ/1/

这是它在 Chrome 中的样子（正确）： 在 Chrome 中正确渲染：并排

问题是Firefox中的下部框从它们的“父母” tds 中抵消了。 下框偏移

Firefox 渲染错误的原因是什么以及如何解决？

更新： FF 19 (mac)和IE 9 (win)出现错误渲染！

4

1 回答 1

0

花了很多时间研究和调试，我准备回答我自己的问题：

问题是“容器高度并不总是等于里面所有元素的总和”。发现，这是因为“ line-height ”属性。

此处描述了类似的问题： 设置 CSS 属性 line-height 时的高度计算不正确

这是一个稍加修改的工作解决方案（经过 Chrome 和 FF 测试）：http: //jsfiddle.net/BgYpw/3/

如何解决的想法：将容器内所有元素的高度/外部高度相加，并将该值应用于 canvas.height。

在上面的示例中，它是这样简单地完成的：

c.height = $('#le div').length * $('#le div:first').outerHeight();

内部所有元素的计数乘以 first 的 outerHeight。如果内部元素的高度可能不同，则该解决方案不适用。在这种情况下，您可以通过执行$.each循环并特别是对高度求和来获得高度......

希望我的回复能为某人节省几个小时:)

于 2013-03-14T17:55:56.803 回答