[英]backbone marionette incorrect rendering of element
I'm working on implementing a QR reader in a web based app that uses the PC's webcam. 我正在努力在使用PC网络摄像头的基于Web的应用程序中实现QR阅读器。 This is currently working correct.
目前工作正常。
The framework that I use ( barcode.js ) has a function render(element). 我使用的框架( barcode.js )具有功能render(element)。
I have 2 different files, ScannerView.html and ScannerView.js. 我有2个不同的文件,ScannerView.html和ScannerView.js。 See their code below:
请参见下面的代码:
ScannerView.html ScannerView.html
<!-- Content Header (Page header) -->
<section class="content-header has-background-image">
<div class="background">
<img src="/assets/temp/header.png" />
</div>
<h1><div class="icon"><i class="fa fa-wrench"></i></div> <%=name%></h1>
</section>
<section class="content">
// Withing the following div, the canvas element should be placed
<div id="scanner"></div>
</section>
ScannerView.js ScannerView.js
var YookrApp = require("../../setup");
var scanner = null;
var ScannerView = Backbone.Marionette.CompositeView.extend({
template: require("./ScannerView.html"),
className: "scannerView",
ui: {
scannerDiv: "#scanner"
},
name: "Yookr Code Scanner",
initialize: function(options) {
},
onRender: function() {
w69b.qr.decoding.setWorkerUrl("assets/w69b.qrcode.decodeworker.js");
scanner = new w69b.qr.ui.ContinuousScanner();
// Called when a qr code has been decoded.
scanner.setDecodedCallback(function(result) {
console.log("Decoded qr code:", result);
});
scanner.setStopped(false);
// Render component in element with id "scanner".
console.log("Start rendering");
scanner.render(this.ui.scannerDiv);
console.log("Rendering done");
},
close: function() {
// We have to dispose the scanner object.
// If we don"t do this, the webcam will
// always be enabled
scanner.dispose();
}
});
module.exports = ScannerView;
When I run my app, the scanner.render()
function should add a <canvas>
element inside <div id="scanner"></div>
in ScannerView.html 运行我的应用程序时,
scanner.render()
函数应在ScannerView.html的 <div id="scanner"></div>
内添加一个<canvas>
元素。
Problem 问题
I'm not able to render the canvas using scanner.render()
properly withing the <div id="scanner"></div>
that is located in my html file. 我无法使用html文件中的
<div id="scanner"></div>
正确使用scanner.render()
渲染画布。 I tried to use document.getElementById and this.ui.scannerDiv with different, but not correct result. 我尝试将document.getElementById和this.ui.scannerDiv与不同但不正确的结果一起使用。
Because I defined an UI element in the ScannerView.js file, I should be able to call scanner.render(this.ui.scannerDiv);
因为我在ScannerView.js文件中定义了UI元素,所以我应该能够调用
scanner.render(this.ui.scannerDiv);
This should use the div with id scanner in my html view, but instead the canvas is not rendered at all. 这应该在我的html视图中使用带有id 扫描程序的div,但是画布根本不会渲染。 In my console, I can see the following warnings:
在控制台中,我可以看到以下警告:
[.Offscreen-For-WebGL-0000020AB57365B0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawArrays: framebuffer incomplete
[.Offscreen-For-WebGL-0000020AB57365B0] GL错误:GL_INVALID_FRAMEBUFFER_OPERATION:glDrawArrays:帧缓冲区不完整
and 和
[.Offscreen-For-WebGL-0000020AB57365B0]RENDER WARNING: texture bound to texture unit 2 is not renderable.
[.Offscreen-For-WebGL-0000020AB57365B0]渲染警告:绑定到纹理单元2的纹理不可渲染。 It maybe non-power-of-2 and have incompatible texture filtering.
它可能不是2的幂,并且具有不兼容的纹理过滤。
When I use scanner.render(document.getElementById("scanner"));
当我使用
scanner.render(document.getElementById("scanner"));
, I can see that the canvas is rendered, but not in the correct location. ,我可以看到画布已渲染,但是没有在正确的位置。 Please see my added screenshot for the result:
请查看我添加的屏幕截图以获取结果:
At this point I'm stuck. 在这一点上,我被困住了。 I dont know how I can achieve that the canvas is rendered in the correct div.
我不知道如何才能在正确的div中渲染画布。
After searching Google for a while longer, I found a solution. 搜索了一段时间之后,我找到了解决方案。
The onRender: function() { }
"gets triggered when the View's DOM subtree is prepared for insertion into the DOM but before those elements are viewable", according to this webiste. 根据该网站的报道,
onRender: function() { }
“在准备将View的DOM子树插入DOM中但在这些元素可见之前触发。”
after changing onRender
to onShow
in my javascript file, the canvas element is rendered in the correct location. 在我的JavaScript文件中将
onRender
更改为onShow
之后,canvas元素onShow
现在正确的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.