小编H_e*_*rik的帖子

使用pdf.js和ImageData将.pdf渲染为单个Canvas

我试图使用PDF.js读取整个.pdf文档,然后在单个画布上渲染所有页面.

我的想法:将每个页面渲染到画布上并获取ImageData(context.getImageData()),清除画布做下一页.我将所有ImageDatas存储在一个数组中,一旦所有页面都在那里,我想将数组中的所有ImageDatas放到一个画布上.

var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
    //Prepare some things
    var canvas = document.getElementById('cv');
    var context = canvas.getContext('2d');
    var scale = 1.5;
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
        pdf = _pdf;
        //Render all the pages on a single canvas
        for(var i = 1; i <= pdf.numPages; i ++){
            pdf.getPage(i).then(function getPage(page){
                var viewport = page.getViewport(scale);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({canvasContext: context, viewport: viewport});
                pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
                context.clearRect(0, 0, canvas.width, canvas.height);
                p.Out("pre-rendered page …
Run Code Online (Sandbox Code Playgroud)

javascript getimagedata html5-canvas putimagedata pdf.js

12
推荐指数
2
解决办法
3万
查看次数

dat.GUI用户输入无效

我正在构建一个简单的Web应用程序.作为其中的一部分,我想使用dat.GUI,因为它似乎是最简单的方法.

我想做什么:我使用three.js来显示一个对象.在这个对象上,我想要某种GUI(目前使用dat.GUI),它允许用户输入搜索词并点击按钮然后调用使用搜索词的函数.

到目前为止,我已经创建了一个名为搜索词的变量,并将其添加到GUI中.这很好,并显示变量的值.GUI还能够监听变量并在更改后进行更新.但我无法修改该值.我还添加了一个字段来调整我添加到szene中的光的强度为three.js.对于GUI的这一部分,通过拖动条调整值,但尝试输入值则不然.

代码看起来像这样:

var searchterm = '';
...

function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();

}
Run Code Online (Sandbox Code Playgroud)

任何有关为什么我无法编辑其他易于使用的GUI的值或建议的帮助将不胜感激.

javascript three.js dat.gui

3
推荐指数
2
解决办法
3519
查看次数

在纯CSS选项卡菜单中偏移锚点

我想在我的页面中集成一个带有选项卡的部分,并在纯CSS3中找到了一个很好的教程来http://t3n.de/news/css3-dynamische-tabs-ohne-365861/

通过一个工作示例:http://jsfiddle.net/6wcfH/

HTML的基本结构如下所示:

<article class="infobox">
<section id="allgemeines">
    <h2><a href="#allgemeines">Allgemeines</a></h2>
    <p>Hier stehen ganz allgemeine Informationen.</p>
</section>
<section id="funktionen">
    <h2><a href="#funktionen">Funktionen</a></h2>
    <p>Hier stehen Informationen zu den Funktionen</p>
</section>
<section id="preise">
    <h2><a href="#preise">Preise</a></h2>
    <p>Hier stehen Informationen zu den Preisen.</p>
</section>
Run Code Online (Sandbox Code Playgroud)

我只是复制了代码并改变了整个东西的位置以适合我的页面.

现在,h2s中的链接显示为选项卡,然后单击它们将显示相应的部分.

我的问题:现在这将跳转到某种方式,以便h2元素将显示在视野之外(上图).我正在寻找一种方法来抵消它,这样我就会跳到略高的位置.

到目前为止,我找到了实现这种插入跨度的方法,并将跨度向上移动并跳转到那个.但是我不能应用这种策略,因为我想跳到文章中的一个部分而不是一些内联元素.

什么是一种方法来实现一个块,绝对定位元素的偏移量而不使用JavaScript但纯CSS?

html css css3

1
推荐指数
1
解决办法
1276
查看次数