Question

我在页面上获得所需的canvas元素布局时遇到问题。我正在使用表格来进行布局。所需的布局是左边有一个画布是全高，另外两个画布在右边，一个在另一个的顶部，左边画布的组合高度。两个右画布具有固定的宽度和高度。调整浏览器窗口大小时，我希望左画布调整大小以占用所有可用宽度（直到右画布的宽度）。我正在使用window.onresize事件来捕获调整大小事件并调整左画布的大小。

我看到的问题是，当浏览器窗口宽度变大时左侧的cavas会正确调整大小，但是当浏览器窗口宽度变小时，左侧的Cavas会缩小！代码如下。是什么赋予了？画布中是否存在一些不允许灵活调整大小的内容？

我找不到运气这个问题的答案。希望有人在这里征服了这一点，并且可以帮助我。

以下是示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>SO Example</title>
        <script type="text/javascript">
            window.onload = function ()
            {
                var canvas = document.getElementById("wf1");
                canvas.width = canvas.parentNode.clientWidth;
                canvas.height = canvas.parentNode.clientHeight;
            }
            window.onresize = function ()
            {
                var canvas = document.getElementById("wf1");
                canvas.width = canvas.parentNode.clientWidth;
                canvas.height = canvas.parentNode.clientHeight;
            }
        </script>

        <style type="text/css">
            table
            {
                border-collapse: collapse;
                background-color: #ccc;
            }
            tr, td
            {
                padding: 0;
                line-height: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <table>
            <tr class="slot">
                <td>
                    <canvas id="wf1" class="wfblock" style="background-color:red;"></canvas>
                </td>
                <td>
                    <canvas id="pm1" style="background-color: green; width: 200px; height: 84px;"></canvas>
                    <canvas id="pm2" style="background-color: blue;  width: 200px; height: 84px;"></canvas>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 1

您的画布可以在两个方向上调整：增长和缩小。

我经常这样做，但我发现唯一有用的东西（特别是涉及表时）是宽度和高度均为100％尺寸并调整容器（无论是td还是{ {1}}）以经典的方式。

为了避免视口尺寸与画布尺寸不同的问题，我总是为resize事件添加一个监听器。

使用jquery，我通常最终得到这种类，其中为每个画布创建一个Grapher实例：

div

在你的情况下，我会创建例如function Grapher(options) { this.graphId = options.canvasId; this.dimChanged = true; // you may remove that if you want (see above) }; Grapher.prototype.draw = function() { if (!this._ensureInit()) return; // makes all the drawing, depending on the state of the application's model // uses dimChanged to know if the positions and dimensions of drawed objects have // to be recomputed due to a change in canvas dimensions } Grapher.prototype._ensureInit = function() { if (this.canvas) return true; var canvas = document.getElementById(this.graphId); if (!canvas) { return false; } if (!$('#'+this.graphId).is(':visible')) return false; this.canvas = canvas; this.context = this.canvas.getContext("2d"); var _this = this; var setDim = function() { _this.w = _this.canvas.clientWidth; _this.h = _this.canvas.clientHeight; _this.canvas.width = _this.w; _this.canvas.height = _this.h; _this.dimChanged = true; _this.draw(); // calls the function that draws the content }; setDim(); $(window).resize(setDim); // other inits (mouse hover, mouse click, etc.) return true; };。

无法在a中获取<canvas>以缩小宽度<table> </table> </canvas>

1 个答案: