我正在尝试创建一个从Canvas元素扩展的“Viewport”类型元素。我打算用它填充父容器,但这似乎不是很简单。
canvas元素不适用于style =“width:100%; height:100%”(如果未设置特殊的Canvas宽度和height属性,它将恢复为默认值300x150像素,否则它将如果我尝试将这些属性设置为“100%”,则转到100x100像素。这使我的任务是根据父元素的大小手动设置画布元素的宽度。但是我在尝试时不知所措。找出一种访问resize事件的方法我可以从自定义元素的角度添加一个处理程序。我似乎无法从自定义元素中的任何位置访问window.on.resize。我是否必须这样做从外面看?
以下是聚合物元素定义的示例:
<polymer-element name="canvas-viewport">
<template>
<style>
@host{
:scope {
margin:0px;
padding:0px;
display:block;
position:relative;
width:100%;
height:100%;
background:limegreen;
overflow:visible;
border:0;
}
}
div {
border:0;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
</style>
<div id="container">
<canvas width="{{wpWidth}}" height="{{wpHeight}}" id="theCanvas"></canvas>
</div>
</template>
<script type="application/dart" src="canvas_viewport.dart"></script>
</polymer-element>
以下是随附的聚合物类定义中的一些dart代码,用于尝试根据此问题的建议解决方案处理我所做的调整大小。
@override
void attached() {
super.attached();
viewPortContainer = shadowRoot.querySelector("#container");
window.onResize.listen(resizecontainer);
}
void resizecontainer(Event e){
wpWidth = viewPortContainer.clientWidth;
wpHeight = viewPortContainer.clientHeight;
print("resizing Width:$wpWidth , Height:$wpHeight ");
}
然而,这导致每个resize事件的高度增加三个像素的错误,即使边距和填充设置为零。
答案 0 :(得分:5)
OnResize在自定义元素中为我工作。
@override
void attached() {
super.attached();
window.onResize.listen((e) {
print(e.currentTarget.innerWidth);
});
}
答案 1 :(得分:1)
这就是我将在Polymer中实现此目标的方式。
connectedCallback() {
super.connectedCallback();
this._onResize = this.onResize.bind(this);
window.addEventListener("resize", this._onResize);
}
onResize(e) {
console.log('width', e.currentTarget.innerWidth);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener("resize", this._onResize);
}