聚合物中的clientwidth顯示為零
[英]clientwidth in polymer is showing ZERO
問題描述
我正在嘗試使用BBC的peaks.js在聚合物中顯示音頻波形。 此代碼運行完美。 基於要點，我創建了一個簡單的聚合物web組件，該組件應顯示音頻波形。
<!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（如fugure所示）
原始示例代碼中為1000。有人可以指出我在哪里做錯了。 我是這種聚合物的新手，非常感謝您的幫助。 謝謝。
1 個解決方案
解決方案1
0 2018-01-08 11:36:21
在打開您的overlay-dialog之前，您的#container不會設置任何clientWidth （即使已顯式設置大小）。
看來您需要確保將peaks.init()推遲到那時。
我不熟悉peaks.js及其執行初始化的方式，但是您可以嘗試在對話框上監聽iron-overlay-opened事件，並在#audiowaveform的source元素上設置src屬性。
當getBoundingClientRect正確時，clientWidth和clientHeight報告為零
[英]clientWidth and clientHeight report zero while getBoundingClientRect is correct
clientHeight 和 clientWidth 在 Angular 和 Ionic 組件中始終為零
[英]clientHeight & clientWidth always zero in Angular & Ionic Component
聚合物1.0中的Element.clientWidth / .clientHeight 1.0 /傳單0.7.3
[英]Element.clientWidth / .clientHeight in polymer 1.0 / leaflet 0.7.3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
ClientWidth為零
當getBoundingClientRect正確時，clientWidth和clientHeight報告為零
clientWidth和clientHeight總是為ie7返回零
clientHeight 和 clientWidth 在 Angular 和 Ionic 組件中始終為零
聚合物1.0中的Element.clientWidth / .clientHeight 1.0 /傳單0.7.3
Firefox中未顯示聚合物元素
Chrome中未顯示聚合物圖標
將空值顯示為零
數組的長度顯示為零
Google Chart未顯示在Polymer 2.0元素內部
相關標簽