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/

修正方法のアイデア: コンテナー内のすべての要素の高さ/outerHeight を合計し、その値を canvas.height に適用します。

上記の例では、次のように単純に実行されます。

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

内部のすべての要素のカウントは、最初のouterHeightで乗算されます。内部の要素の高さが異なる場合、その解決策はうまくいきません。その場合、特に$.eachループを実行して高さを合計することで高さを取得できます...

私の返信が誰かのために時間を節約できることを願っています:)

于 2013-03-14T17:55:56.803 に答える