聚合物中的客户宽度为零
聚合物中的客户宽度为零
提问于 2018-01-08 09:22:37
我正试图用英国广播公司的peaks.js在聚合物中显示音频波形。这代码运行得非常完美。在此基础上，我创建了一个简单的聚合物网络组件，应该显示音频波形。
<!doctype HTML>
<link rel="import" href="../bower_components/iron-overlay-behavior/iron-overlay-behavior.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<script type="text/javascript" src="peaks.js"></script>
<dom-module id="overlay-dialog">
<template>
<style is="custom-style">
:host {
background: white;
color: black;
padding: 24px;
border: 2px solid;
border-color: #3386ce;
width:1100px;
height:450px;
box-shadow: rgba(0, 0, 0, 0.24) -2px 5px 12px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
}
</style>
<slot></slot>
</template>
</dom-overlay>
<dom-module id="audiowaveform-dialog">
<template>
<style>
.scrollable {
border: 1px solid lightgray;
padding: 24px;
@apply --layout-scroll;
}
#container {
margin: 24px auto;
width: 1000px;
}
.zoom-container {
box-shadow: 3px 3px 20px #919191;
margin: 0 0 24px 0;
-moz-box-shadow: 3px 3px 20px #919191;
-webkit-box-shadow: 3px 3px 20px #919191;
line-height: 0;
}
.overview-container {
height: 85px;
}
</style>
<overlay-dialog id="dialog" tabindex="-1" no-cancel-on-esc-key
no-cancel-on-outside-click always-on-top
on-iron-overlay-closed="closePerformed"
<h2>Dialog Title</h2>
<div id="container" class="scrollable">
<div class="waveform">
<div class="zoom-container" hidden="">
<div class="konvajs-content" role="presentation"
style="position: relative; width: 1000px; height: 200px;">
<canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
</canvas>
<canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
</canvas>
<canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
</canvas>
<canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
</canvas>
<canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
</canvas>
</div>
</div>
<div class="overview-container" hidden="">
<div class="konvajs-content" role="presentation" style="position: relative; width: 1000px; height: 85px;">
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
<canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
</canvas>
</div>
</div>
</div>
</div>
<div id="audio-controls">
<audio controls="controls" id='audiowaveform'>
<source src="sample_21.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button data-action="zoom-in">Zoom in</button>
<button data-action="zoom-out">Zoom out</button>
<button data-action="add-segment">Add a Segment at current time</button>
<button data-action="add-point">Add a Point at current time</button>
<button data-action="log-data">Log segments/points</button>
<button data-action="loop">Loop</button>
</div>
<!--p> Hello World</p>
<p class="scrollable">
</p-->
<vaadin-button on-click="closeDialog">Close</vaadin-button>
</overlay-dialog>
</template>
<script>
Polymer({
is: 'overlay-dialog',
behaviors: [Polymer.IronOverlayBehavior]
});
Polymer({
is: 'audiowaveform-dialog',
properties: {
isOpened: {
type: Boolean,
value: false
},
mediaType: {
type: String,
value: 'audio/mp3'
},
mediaSrc: {
type: String,
},
options: {
type: Object,
value: {
container: null,
mediaElement: null,
dataUri: {
arraybuffer: 'sample_21.dat'
},
zoomLevels : [8],
flags: {
segFlag : true,
segCallback : function(cb) {
/*var times = cb();
times.x = 'hello';
console.log(times);
modal.show();*/
},
loopFlag : false,
loopCallback :function(cb) {
var times = cb();
console.log(times);
audio.addEventListener('timeupdate', function(){});
}
},
keyboard: false
}
}
},
observers: [
'_mediaChanged(mediaSrc)'
],
ready: function() {
this.options.container = Polymer.dom(this.root).querySelector('#container');
this.options.mediaElement = Polymer.dom(this.root).querySelector('audio');
},
/*attached: function() {
this.async(function() {
console.log("clientWidth :" + this.$.container.clientWidth);
}, 5000);
},*/
showAudioDialog: function() {
console.log("showAudioDialog");
if(!this.isOpened) {
this.$.dialog.opened = true;
this.isOpened = true;
} else
console.log("Dialog already opened");
},
closeDialog: function() {
this.$.dialog.opened = false;
this.isOpened = false;
},
closePerformed: function(e) {
console.log("closePerformed");
console.log(e);
console.log(this.mediaSrc);
},
_mediaChanged: function(mediaSrc) {
console.log("_mediaChanged");
/*this.options.container = Polymer.dom(this.$.container);
this.options.mediaElement = Polymer.dom(this.root).querySelector('audio');*/
console.log(this.options);
var peaksInstance = peaks.init(this.options);
}
});
</script>
</dom-module>当代码运行时，peaks.js抛出一个错误：
TypeError: Peaks.init请确保容器有宽度。
在进一步的调查中，我发现"this.$.options.container.clientwidth“是0(如图中所示)。
而在最初的示例代码中，它是1000。有人能指出我在哪里做错事吗？我是这种聚合物的新手，任何帮助都是非常感谢的。谢谢。
回答 1
Stack Overflow用户
发布于 2018-01-08 11:36:21
在打开#container之前，您的overlay-dialog不会有任何clientWidth设置(即使它的大小是显式的)。
看起来您需要确保peaks.init()被推迟到那个时候。
我不熟悉peaks.js及其如何执行初始化，但您可以尝试侦听对话框中的iron-overlay-opened事件，并在#audiowaveform的source元素上设置src属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48147312
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号