Question

我将我的dart聚合物应用程序更新为最新的聚合物，核心元素和纸张元素。我之前使用的是聚合物元素，聚合物布局中有一个聚合物布局事件，我用它来帮助调整画布元素的大小以获取它的容器的整个大小（参见{{3} }）。

我无法找到一个等效的核心元素，所以我回到原点。我现在该如何处理？

在我使用聚合物布局事件之前，我已经回到了原点。我可以将容器的大小调整到完整的浏览器宽度，但它的高度是画布的默认高度。如果我调整浏览器窗口的大小，它就会起作用，因此这是一个初始化问题。在添加聚合物布局事件之前，我不得不使用带有超时的hack。这真是太过分了，所以我在祈祷，我所缺少的新核心元素有一种清晰的方式。

另见Autosizing canvas inside a polymer grid layout

我的代码

HTML 的

<link rel="import" href="packages/paper_elements/paper_slider.html">

<polymer-element name="delme-canvas">

  <template>
    <style>
      #top {
        background-color: red;
        height: 100%;
      }
      #slider-container {
        margin: 10px;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: rgb(238, 238, 238);
      }
      paper-slider {
        width: 150px;
      }
      canvas {
        border: 2px solid black;
      }
      #canvasContainer {
        border: 2px solid blue;
        height: 100%;
      }
    </style>
    <section id="top" vertical layout flex>
      <section id="section" horizontal layout>
        <div id="slider-container" center horizontal layout>
          <div id="label">Roundness</div>
          <paper-slider id="paper_slider" editable min="0" max="100" step="0.1"></paper-slider>
        </div>
        <div id="div" flex></div>
      </section>
      <section id="canvasContainer" flex>
        <canvas id="canvas" flex></canvas>
      </section>
    </section>
  </template>

  <script type="application/dart" src="delme_canvas.dart">
  </script>

</polymer-element>

达特

import 'dart:html';
import 'package:polymer/polymer.dart';

@CustomTag('delme-canvas')
class CanvasViewElement extends PolymerElement  {

  CanvasElement canvas;
  HtmlElement canvasContainer;

  CanvasViewElement.created() : super.created();

  void _resize() {
    if (canvasContainer.clientWidth == 0)
      return;
    canvas.width = canvasContainer.clientWidth;
    canvas.height = canvasContainer.clientHeight;


    _redraw();
  }

  void _redraw() {
    final context = canvas.context2D;
    context.fillRect(10, 10, 100, 100);
    context.stroke();
  }

  @override
  void ready() {
    canvas = $['canvas'];
    canvasContainer = $['canvasContainer'];

    window.onResize.listen((_) {
      _resize();
    });

    _resize();

  }

}

index.hml

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>delme</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="delme_canvas.html">
  </head>
<body unresolved fit vertical layout>
  <delme-canvas flex></delme-canvas>
  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>

Answer 1

我尝试过Günter使用attached的建议，但这也没有用。但是，在这个过程中，我发现有一个新的（因为我的原始代码已编写）生命周期事件，称为domReady。这似乎可以解决问题。

因此ready方法更改为domReady，如

@override
void domReady() {
  canvas = $['canvas'];
  canvasContainer = $['canvasContainer'];

  window.onResize.listen((_) {
    _resize();
  });

  _resize();

}

自动调整画布以获取其容器的完整大小

1 个答案: