使用 d3-zoom 与 WebGL 交互

2023-12-02

我正在尝试收集一个小示例，该示例使用 d3-zoom 为使用 WebGL 渲染的画布元素提供简单的交互性。我想做的就是提供平移/缩放，这使用 4x4 变换矩阵相当简单。

我遇到的问题是缩放（缩放）。如果您查看一些 d3-zoom 示例，您会发现缩放焦点始终位于鼠标的位置。

如果您使用k, tx, and ty，直接来自缩放变换的值，平移有效，但缩放会偏移画布宽度和高度的一半，请参阅

var width = 300,
        height = 150;

    var zoom = d3.zoom()
        .on( 'zoom', zoomed );

    var canvas = d3.select( 'body' )
        .append( 'canvas' )
        .attr( 'width', width )
        .attr( 'height', height )
        .call( zoom );

    var gl = canvas.node().getContext( 'webgl' );
    var shader = basic_shader(gl);

    initialize_gl();
    set_transform( 1, 0, 0 );

    function zoomed () {
        var t = d3.event.transform;
        set_transform( t.k, t.x, t.y );
    }

    function initialize_gl () {

        var sb = d3.color('steelblue');
        gl.clearColor(sb.r / 255, sb.g / 255, sb.b / 255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var vertices = [
            0.5, 0.5, 0.0, 1.0,
            -0.5, 0.5, 0.0, 1.0,
            0.5, -0.5, 0.0, 1.0,
            -0.5, -0.5, 0.0, 1.0
        ];

        var colors = [
            1.0, 1.0, 1.0, 1.0,    // white
            1.0, 0.0, 0.0, 1.0,    // red
            0.0, 1.0, 0.0, 1.0,    // green
            0.0, 0.0, 1.0, 1.0     // blue
        ];

        var vertex_buffer = gl.createBuffer();
        var color_buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.color_attrib, 4, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.vertex_attrib, 4, gl.FLOAT, false, 0, 0);

    }

    function set_transform ( k, tx, ty ) {

        var matrix = new Float32Array([
            k, 0, 0, 0,
            0, k, 0, 0,
            0, 0, 1, 0,
            2*tx/width, -2*ty/height, 0, 1
        ]);

        gl.uniformMatrix4fv( shader.matrix_uniform, false, matrix );
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

    }

    function basic_vertex () {

        return [
            'attribute vec4 vertex_position;',
            'attribute vec4 vertex_color;',
            'varying lowp vec4 vert_color;',
            'uniform mat4 matrix;',
            'void main( void ) {',
            '   gl_Position = matrix * vertex_position;',
            '   vert_color = vertex_color;',
            '}'
        ].join('\n');

    }

    function basic_fragment () {

        return [
            'varying lowp vec4 vert_color;',
            'void main( void ) {',
            '   gl_FragColor = vert_color;',
            '}'
        ].join('\n');

    }

    function basic_shader ( gl ) {

        var program = gl_program( gl, basic_vertex(), basic_fragment() );

        gl.useProgram( program );
        program.vertex_attrib = gl.getAttribLocation( program, 'vertex_position' );
        program.color_attrib = gl.getAttribLocation( program, 'vertex_color' );
        program.matrix_uniform = gl.getUniformLocation( program, 'matrix' );
        program.translate_uniform = gl.getUniformLocation( program, 'translate_matrix' );
        program.scale_uniform = gl.getUniformLocation( program, 'scale_matrix' );
        gl.enableVertexAttribArray( program.vertex_attrib );
        gl.enableVertexAttribArray( program.color_attrib );

        return program;

    }

    function gl_shader ( gl, type, code ) {

        var shader = gl.createShader( type );
        gl.shaderSource( shader, code );
        gl.compileShader( shader );
        return shader;

    }

    function gl_program ( gl, vertex_source, fragment_source ) {

        var shader_program = gl.createProgram();
        var vertex_shader = gl_shader( gl, gl.VERTEX_SHADER, vertex_source );
        var fragment_shader = gl_shader( gl, gl.FRAGMENT_SHADER, fragment_source );

        if ( shader_program && vertex_shader && fragment_shader ) {

            gl.attachShader( shader_program, vertex_shader );
            gl.attachShader( shader_program, fragment_shader );
            gl.linkProgram( shader_program );

            gl.deleteShader( vertex_shader );
            gl.deleteShader( fragment_shader );

            return shader_program;

        }

    }

<script src="https://d3js.org/d3.v4.min.js"></script>

我的预感是，这与以下事实有关：在 WebGL 中，视口 x 和 y 坐标分别从 -1 到 1，而 d3-zoom 使用画布元素内的鼠标坐标，标准化后可以在范围 0 到 1。

如果将鼠标放在画布的左上角（画布坐标中的 (0,0)）并尝试缩放，您会看到这种情况。它将缩放，就好像鼠标位于画布中心（WebGL 坐标中的 (0,0)）一样。

为了解决这个问题，您可以从 x 平移中减去 1（即坐标系 [-1,1] 宽度的一半）并添加 1（即坐标系 [-1,1] 高度的一半） y 翻译，如下所示

    var width = 300,
        height = 150;

    var zoom = d3.zoom()
        .on( 'zoom', zoomed );

    var canvas = d3.select( 'body' )
        .append( 'canvas' )
        .attr( 'width', width )
        .attr( 'height', height )
        .call( zoom );

    var gl = canvas.node().getContext( 'webgl' );
    var shader = basic_shader(gl);

    initialize_gl();
    set_transform( 1, 0, 0 );

    function zoomed () {
        var t = d3.event.transform;
        set_transform( t.k, t.x, t.y );
    }

    function initialize_gl () {

        var sb = d3.color('steelblue');
        gl.clearColor(sb.r / 255, sb.g / 255, sb.b / 255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var vertices = [
            0.5, 0.5, 0.0, 1.0,
            -0.5, 0.5, 0.0, 1.0,
            0.5, -0.5, 0.0, 1.0,
            -0.5, -0.5, 0.0, 1.0
        ];

        var colors = [
            1.0, 1.0, 1.0, 1.0,    // white
            1.0, 0.0, 0.0, 1.0,    // red
            0.0, 1.0, 0.0, 1.0,    // green
            0.0, 0.0, 1.0, 1.0     // blue
        ];

        var vertex_buffer = gl.createBuffer();
        var color_buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.color_attrib, 4, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.vertex_attrib, 4, gl.FLOAT, false, 0, 0);

    }

    function set_transform ( k, tx, ty ) {

        var matrix = new Float32Array([
            k, 0, 0, 0,
            0, k, 0, 0,
            0, 0, 1, 0,
            2*tx/width-1.0, -2*ty/height+1.0, 0, 1
        ]);

        gl.uniformMatrix4fv( shader.matrix_uniform, false, matrix );
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

    }

    function basic_vertex () {

        return [
            'attribute vec4 vertex_position;',
            'attribute vec4 vertex_color;',
            'varying lowp vec4 vert_color;',
            'uniform mat4 matrix;',
            'void main( void ) {',
            '   gl_Position = matrix * vertex_position;',
            '   vert_color = vertex_color;',
            '}'
        ].join('\n');

    }

    function basic_fragment () {

        return [
            'varying lowp vec4 vert_color;',
            'void main( void ) {',
            '   gl_FragColor = vert_color;',
            '}'
        ].join('\n');

    }

    function basic_shader ( gl ) {

        var program = gl_program( gl, basic_vertex(), basic_fragment() );

        gl.useProgram( program );
        program.vertex_attrib = gl.getAttribLocation( program, 'vertex_position' );
        program.color_attrib = gl.getAttribLocation( program, 'vertex_color' );
        program.matrix_uniform = gl.getUniformLocation( program, 'matrix' );
        program.translate_uniform = gl.getUniformLocation( program, 'translate_matrix' );
        program.scale_uniform = gl.getUniformLocation( program, 'scale_matrix' );
        gl.enableVertexAttribArray( program.vertex_attrib );
        gl.enableVertexAttribArray( program.color_attrib );

        return program;

    }

    function gl_shader ( gl, type, code ) {

        var shader = gl.createShader( type );
        gl.shaderSource( shader, code );
        gl.compileShader( shader );
        return shader;

    }

    function gl_program ( gl, vertex_source, fragment_source ) {

        var shader_program = gl.createProgram();
        var vertex_shader = gl_shader( gl, gl.VERTEX_SHADER, vertex_source );
        var fragment_shader = gl_shader( gl, gl.FRAGMENT_SHADER, fragment_source );

        if ( shader_program && vertex_shader && fragment_shader ) {

            gl.attachShader( shader_program, vertex_shader );
            gl.attachShader( shader_program, fragment_shader );
            gl.linkProgram( shader_program );

            gl.deleteShader( vertex_shader );
            gl.deleteShader( fragment_shader );

            return shader_program;

        }

    }

<script src="https://d3js.org/d3.v4.min.js"></script>

但是，通过执行偏移，您的场景最初会被平移，这并不完全理想。所以我的问题是，处理这个问题的最佳方法是什么？是由 d3 端处理最好还是由 WebGL 端处理最好？

我刚刚移动了你的顶点以匹配你的矩阵

    var vertices = [
         .5,  -.5, 0.0, 1.0,
        1.5,  -.5, 0.0, 1.0,
         .5, -1.5, 0.0, 1.0,
        1.5, -1.5, 0.0, 1.0
    ];

var width = 300,
        height = 150;

    var zoom = d3.zoom()
        .on( 'zoom', zoomed );

    var canvas = d3.select( 'body' )
        .append( 'canvas' )
        .attr( 'width', width )
        .attr( 'height', height )
        .call( zoom );

    var gl = canvas.node().getContext( 'webgl' );
    var shader = basic_shader(gl);

    initialize_gl();
    set_transform( 1, 0, 0 );

    function zoomed () {
        var t = d3.event.transform;
        set_transform( t.k, t.x, t.y );
    }

    function initialize_gl () {

        var sb = d3.color('steelblue');
        gl.clearColor(sb.r / 255, sb.g / 255, sb.b / 255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var vertices = [
             .5,  -.5, 0.0, 1.0,
            1.5,  -.5, 0.0, 1.0,
             .5, -1.5, 0.0, 1.0,
            1.5, -1.5, 0.0, 1.0
        ];        

        var colors = [
            1.0, 1.0, 1.0, 1.0,    // white
            1.0, 0.0, 0.0, 1.0,    // red
            0.0, 1.0, 0.0, 1.0,    // green
            0.0, 0.0, 1.0, 1.0     // blue
        ];

        var vertex_buffer = gl.createBuffer();
        var color_buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.color_attrib, 4, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.vertex_attrib, 4, gl.FLOAT, false, 0, 0);

    }

    function set_transform ( k, tx, ty ) {

        var matrix = new Float32Array([
            k, 0, 0, 0,
            0, k, 0, 0,
            0, 0, 1, 0,
            2*tx/width-1.0, -2*ty/height+1.0, 0, 1
        ]);

        gl.uniformMatrix4fv( shader.matrix_uniform, false, matrix );
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

    }

    function basic_vertex () {

        return [
            'attribute vec4 vertex_position;',
            'attribute vec4 vertex_color;',
            'varying lowp vec4 vert_color;',
            'uniform mat4 matrix;',
            'void main( void ) {',
            '   gl_Position = matrix * vertex_position;',
            '   vert_color = vertex_color;',
            '}'
        ].join('\n');

    }

    function basic_fragment () {

        return [
            'varying lowp vec4 vert_color;',
            'void main( void ) {',
            '   gl_FragColor = vert_color;',
            '}'
        ].join('\n');

    }

    function basic_shader ( gl ) {

        var program = gl_program( gl, basic_vertex(), basic_fragment() );

        gl.useProgram( program );
        program.vertex_attrib = gl.getAttribLocation( program, 'vertex_position' );
        program.color_attrib = gl.getAttribLocation( program, 'vertex_color' );
        program.matrix_uniform = gl.getUniformLocation( program, 'matrix' );
        program.translate_uniform = gl.getUniformLocation( program, 'translate_matrix' );
        program.scale_uniform = gl.getUniformLocation( program, 'scale_matrix' );
        gl.enableVertexAttribArray( program.vertex_attrib );
        gl.enableVertexAttribArray( program.color_attrib );

        return program;

    }

    function gl_shader ( gl, type, code ) {

        var shader = gl.createShader( type );
        gl.shaderSource( shader, code );
        gl.compileShader( shader );
        return shader;

    }

    function gl_program ( gl, vertex_source, fragment_source ) {

        var shader_program = gl.createProgram();
        var vertex_shader = gl_shader( gl, gl.VERTEX_SHADER, vertex_source );
        var fragment_shader = gl_shader( gl, gl.FRAGMENT_SHADER, fragment_source );

        if ( shader_program && vertex_shader && fragment_shader ) {

            gl.attachShader( shader_program, vertex_shader );
            gl.attachShader( shader_program, fragment_shader );
            gl.linkProgram( shader_program );

            gl.deleteShader( vertex_shader );
            gl.deleteShader( fragment_shader );

            return shader_program;

        }

    }

<script src="https://d3js.org/d3.v4.min.js"></script>

但老实说，我可能会使用数学库并使用一些转换。这样我更容易理解代码。我不确定D3的“空间”是什么。我想虽然它只是传递给你一个偏移量和一个比例。在这种情况下

        // change the space to be pixels with 0,0 in top left
        var matrix = m4.ortho(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);

        // apply the d3 translate and zoom
        matrix = m4.translate(matrix, [tx, ty, 0]);
        matrix = m4.scale(matrix, [k, k, 1]);

        // translate the unit quad to the center 
        matrix = m4.translate(matrix, [width / 2, height / 2, 0]);

        // make the unit quad be half the size of the canvas
        matrix = m4.scale(matrix, [width / 2, height / 2 , 1]);

var m4 = twgl.m4;
    var width = 300,
        height = 150;

    var zoom = d3.zoom()
        .on( 'zoom', zoomed );

    var canvas = d3.select( 'body' )
        .append( 'canvas' )
        .attr( 'width', width )
        .attr( 'height', height )
        .call( zoom );

    var gl = canvas.node().getContext( 'webgl' );
    var shader = basic_shader(gl);

    initialize_gl();
    set_transform( 1, 0, 0 );

    function zoomed () {
        var t = d3.event.transform;
        set_transform( t.k, t.x, t.y );
    }

    function initialize_gl () {

        var sb = d3.color('steelblue');
        gl.clearColor(sb.r / 255, sb.g / 255, sb.b / 255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var vertices = [
            -.5,   .5, 0.0, 1.0,
             .5,   .5, 0.0, 1.0,
            -.5,  -.5, 0.0, 1.0,
             .5,  -.5, 0.0, 1.0
        ];        

        var colors = [
            1.0, 1.0, 1.0, 1.0,    // white
            1.0, 0.0, 0.0, 1.0,    // red
            0.0, 1.0, 0.0, 1.0,    // green
            0.0, 0.0, 1.0, 1.0     // blue
        ];

        var vertex_buffer = gl.createBuffer();
        var color_buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.color_attrib, 4, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(shader.vertex_attrib, 4, gl.FLOAT, false, 0, 0);

    }

    function set_transform ( k, tx, ty ) {

        // change the space to be pixels with 0,0 in top left
        var matrix = m4.ortho(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
        // apply the d3 translate and zoom
        matrix = m4.translate(matrix, [tx, ty, 0]);
        matrix = m4.scale(matrix, [k, k, 1]);
        // translate the unit quad to the center 
        matrix = m4.translate(matrix, [width / 2, height / 2, 0]);
        // make the unit quad be half the size of the canvas
        matrix = m4.scale(matrix, [width / 2, height / 2 , 1]);

        gl.uniformMatrix4fv( shader.matrix_uniform, false, matrix );
        gl.clear( gl.COLOR_BUFFER_BIT );
        gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

    }

    function basic_vertex () {

        return [
            'attribute vec4 vertex_position;',
            'attribute vec4 vertex_color;',
            'varying lowp vec4 vert_color;',
            'uniform mat4 matrix;',
            'void main( void ) {',
            '   gl_Position = matrix * vertex_position;',
            '   vert_color = vertex_color;',
            '}'
        ].join('\n');

    }

    function basic_fragment () {

        return [
            'varying lowp vec4 vert_color;',
            'void main( void ) {',
            '   gl_FragColor = vert_color;',
            '}'
        ].join('\n');

    }

    function basic_shader ( gl ) {

        var program = gl_program( gl, basic_vertex(), basic_fragment() );

        gl.useProgram( program );
        program.vertex_attrib = gl.getAttribLocation( program, 'vertex_position' );
        program.color_attrib = gl.getAttribLocation( program, 'vertex_color' );
        program.matrix_uniform = gl.getUniformLocation( program, 'matrix' );
        program.translate_uniform = gl.getUniformLocation( program, 'translate_matrix' );
        program.scale_uniform = gl.getUniformLocation( program, 'scale_matrix' );
        gl.enableVertexAttribArray( program.vertex_attrib );
        gl.enableVertexAttribArray( program.color_attrib );

        return program;

    }

    function gl_shader ( gl, type, code ) {

        var shader = gl.createShader( type );
        gl.shaderSource( shader, code );
        gl.compileShader( shader );
        return shader;

    }

    function gl_program ( gl, vertex_source, fragment_source ) {

        var shader_program = gl.createProgram();
        var vertex_shader = gl_shader( gl, gl.VERTEX_SHADER, vertex_source );
        var fragment_shader = gl_shader( gl, gl.FRAGMENT_SHADER, fragment_source );

        if ( shader_program && vertex_shader && fragment_shader ) {

            gl.attachShader( shader_program, vertex_shader );
            gl.attachShader( shader_program, fragment_shader );
            gl.linkProgram( shader_program );

            gl.deleteShader( vertex_shader );
            gl.deleteShader( fragment_shader );

            return shader_program;

        }

    }

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

d3js

html5canvas

webgl

zooming

使用 d3-zoom 与 WebGL 交互的相关文章

如何使用角度在垫选择嵌套值中包含过滤器

我正在使用带有嵌套下拉菜单的有角材料下拉值以父级和子级为基础嵌套我面临两个问题自动建议不起作用如果我输入父名称或其关联的子名称则必须以展开模式过滤并显示特定的父视图如果我展开第一个父视图并尝试展开第二个父视图则第一个父视图应在
Google Closure 和生成的 getter/setter

我正在尝试让 KineticJS 与 Google Closure Compiler 一起使用然而 KineticJS 根据变量的名称生成它的 getter 和 setter 像这样的事情 add getter and setter me
Browserify 与 jQuery >= 2 生成“jQuery 需要一个带有文档的窗口”

我正在使用 browserify 使用 CommonJS 样式的依赖项来捆绑我的前端 javascript 例如我有 require jquery dist jquery v2 1 0 beta2 require underscore
如何对页面的某个部分进行实时更新？

我需要刷新页面的各个部分以便在有新数据时进行更新我该怎么办使用jquery 例子是的 jQuery 非常适合这个查看这些方法 http api jquery com category ajax http api jquery co
系统js语法错误，IE11

我有一个 Angular 2 应用程序可以在 Firefox 和 Chrome 中工作但在 IE 中却没有那么多工作根据我的堆栈跟踪我的 System js 设置似乎存在问题这是我在网络控制台中看到的错误描述 Error Syste
EXT JS中有全局变量吗

在 java 和 C 中我们可以全局存储变量并从项目中的任何位置访问它的值比如说我在一个名为Residence我正在保存residenceNumber这是一个INT到一个名为的全局变量houseNumberGlobalVariable
切换 Ag-Grid 中的浮动过滤器？

我试图通过开关或按钮单击来确定浮动过滤器的显示看起来很简单我应该能够在 true 和 false 之间切换将该值提供给网格选项中的浮动过滤器然后刷新标题对吗不幸的是网格似乎总是落后一步当我第一次点击时什么也没有发生当我将
将 Babel 与单个输出文件和 ES6 模块一起使用

这是我的 gulp 任务将 ES6 代码编译成单个 ES5 文件我使用类和模块 import export 在 ES6 中 gulp src paths scripts pipe sourcemaps init pipe babel p
使用 javascript 和 jQuery UI datepicker 获取工作日数

我有两个日期选择器我可以从中计算天数而无需计算星期六和星期日但我想在周五和周六这样做我尝试过一些不同的方法但失败了对我来说处理不包括周六和周日的天数很容易但处理周五和周六的天数则不然以下是我的 javascript 代码 f
Google 闭包编译器使用 WebStorm

我喜欢用谷歌闭包编译器 https developers google com closure compiler in WebStorm https www jetbrains com webstorm 我已经通过 npm 下载了它 npm
pointdown 与 onclick：有什么区别？

两者有什么区别onpointerdown and onclick事件处理程序有任何实际差异吗事件在 DOM 树上传播的方式不一样吗是否有一些设备仅响应这些事件之一我最初以为这只是pointerdown在触摸设备或笔中触发但是onc
如何在 Electron 中使窗口大小响应。（打开应用程序时）

我最近开始在 Electron 上制作一个应用程序我想让窗口具有响应能力例如如果我在不同的屏幕上打开应用程序它应该根据屏幕尺寸以全尺寸打开我的代码 app on ready gt const htmlPath path join
up() 和 down() 与 Ext.getCmp()

我很困惑我需要在 up down 和 Ext getCmp ID 之间使用哪一个作为 grep 对象对我来说定义对象的 ID 并通过 Ext getCmp ID 检索对象更容易而且代码看起来更干净例如 console log thi
如何在从数据库异步加载中用占位符替换不存在的图像

我有一个包含图像的数据库我需要根据用户的请求即时加载这些图像这些图像将作为包含 div 容器中的单独 s 的背景图像类似于图像滚动条该数据库当前是本地数据库但这不是我的问题问题是数据库可能没有我请求的所有图像并且我可能会得到一
使用 _.extend() 进行 JavaScript 继承

有什么区别 Employee prototype Object create Person prototype and extend Employee prototype Person prototype 两者都给出相似的结果输出但下划
getCompatedStyle 类似于 IE8 的 javascript 函数

我正在尝试在 Java GWT 代码中编写一个 Javascript 函数该函数获取以下样式的值 direction fontFamily fontSize fontSizeAdjust fontStyle fontWeight lett
将 html

我有一些服务器端代码当前支持 http 字节范围请求没有任何问题但是我希望能够在将转码后的块发送到客户端之前使用 ffmpeg 即时转码视频文件位于磁盘上但 ffmpeg 要求我在获取字节时给它一个寻道时间范围来自客户给定客户端
当 JavaScript 抛出异常时不要停止它

我正在使用 JavaScript 编写一个 Windows 边栏小工具现在我想捕获所有 JavaScript 异常并将其记录到文本文件中一个问题是当任何一行抛出异常时下一行将不会被执行是否可以自动捕获异常以便执行以下 JavaS
如何将 JSLint 用于依赖于 JQuery 的代码段？

我对 Javascript 比较陌生我想通过 JSLint 运行我周末玩的那段代码这样它就可以指出我在哪里是个十足的白痴不幸的是我收到了大量关于缺少函数声明的错误这些函数声明是 JQuery javascript 库及其各种插件的
将画布下载为 PNG 图像[重复]

这个问题在这里已经有答案了当我尝试将画布下载为 PNG 图像时浏览器会在新页面中打开该图像但不下载它我的下载代码 btnScaricaEtichetta click function console log Download loc

随机推荐

C 中的字符串填充

我编写了这个函数该函数应该执行 StringPadRight Hello 10 0 gt Hello00000 char StringPadRight char string int padded len char pad int len
熊猫read_excel

我花了几个小时努力如何使用 pd read excel 读取 excel 文件其中路径是网站地址我发现该链接不会直接转到文件而只是触发下载有什么简单的方法可以解决吗部分代码 link energy http unstats un
SQLiteOpenHelper 中的 onDowngrade() （或降级时不崩溃的另一种方法）

对于 Java 来说非常陌生使用我的应用程序并决定将 DATABASE VERSION 降回 1 没有真正的原因当我启动该应用程序时它崩溃了错误之一是 E AndroidRuntime 14905 原因 android datab
如何使 Flask-WTForms 从标签名称列表动态更新标签？

我使用 WTForms 定义数据过滤表单其定义如下我的目标是让用户为 BooleanFields 设置指定标签我让每个用户为字段命名标签并将字段名称保存到 Google 数据存储 class MainFilterForm Flask
使用新的 FileReader API 和 DataURL 进行 Javascript 预览似乎效率低下

我正在使用新的 FileReader API 在上传之前预览图像这是使用 DataURL 完成的但如果图像很大 DataURL 可能会很大这对我来说尤其是一个问题因为用户可能一次上传多个图像而预览这些图像实际上大大减慢了我的浏览器
如何通过 Selenium 的 --user-data-dir 参数打开 Chrome 配置文件

我正在尝试使用我现有的帐户和个人资料中的设置加载带有 selenium 的 chrome 浏览器我可以使用 ChromeOptions 设置 userdatadir 和配置文件目录来实现此功能这会按照我想要的方式在浏览器中加载我的个人资
将 Python / Numpy 代码转换为 Cython - 数组问题 - 缓冲区类型仅允许作为函数局部变量？

我正在尝试将一些 Python Numpy 代码转换为 Cython 以提高速度这是我的代码 cimport numpy as np import numpy as np from numpy import import pylab as
Django 使用 AWS ECS Fargate 迁移部署策略？

使用 ECS Fargate 运行数据库迁移的建议部署策略是什么我可以在启动 Gunicorn 服务器之前更新容器命令以运行迁移但如果配置了多个实例这可能会导致并发迁移同时执行我还必须考虑图像已经在运行的事实如果我弄清楚如何在新映
SVG 下的 jQuery

有什么方法可以在 SVG 而不是 HTML 下运行 jQuery 吗我知道关于jQuery svg 插件但这不是我想要的目前 jQuery 引擎包含一些如下语句 div document createElement div div st
为什么我不必在 for 循环中使用 range() 定义变量，但我必须在 Python 中的 while 循环中定义变量？

我有以下使用 for 循环的代码 total 0 for num in range 101 total total num print total 现在使用 while 循环得到相同的结果 num 0 total 0 while num l
在 R闪亮中保存传单地图

我创建了一个应用程序用户可以在其中修改传单地图并且我想在 pdf 报告中使用此地图我有 1 安装了leaflet webshot和htmlwidget包 2 安装PhantomJS 下面是代码的简化版本服务器 R library s
带有内容处置的文件：内联有时仍然提示下载

我的主题行说了我要问的大部分内容我有一个网站可以输出各种格式的报告 HTML CSV TSV Excel 等只要有可能我希望这些文件显示在浏览器中为此我设置了标题使 Content Disposition 成为内联这对于不
索引未应用于索引视图

我有一个索引视图但是当我在该视图上运行查询时不会应用基于视图构建的索引并且查询在没有索引的情况下运行下面是我的虚拟脚本表视图视图上的索引 CREATE TABLE P Test PID INT IDENTITY TID INT
发送二进制文件 TcpClient - 文件大于源

为了涉足网络编程我编写了一个小控制台应用程序来将 png 文件发送到服务器另一个控制台应用程序服务器写入的文件比源 png 文件稍大而且它不会打开客户端应用程序的代码是 private static void SendFile u
样式不适用于垂直方向的拇指

我正在创造垂直范围栏我改变了 webkit appearance slider vertical 我还更改了输入范围栏的属性例如 height width webkit slider runnable track 和 webkit sli
LEMP + wordpress 文件权限能够编辑、升级和使用 sftp 客户端

我正在尝试管理运行nginx的debian网络服务器上的文件权限以便wordpress可以编辑上传和升级而无需使用ftp 我还希望能够使用我的用户帐户使用 sftp 登录我知道这个问题之前已经被问过请参阅here or here 但
导入 Orange 返回“ImportError：没有名为 Orange 的模块”

我想使用 Orange 包科学分析安装于x86 64 Ubuntu 12 04 with Python 2 7 3 进展顺利使用sudo easy install orange 但是该包似乎无法直接使用 11 30 43 leon t
使用嵌套 ng-repeat“观察者反应函数不应更改模型”是什么意思？

这是代码的简化版本即使生成的 HTML 看起来不错我也会收到记录的错误这个异常意味着什么为什么我会得到它索引 html div div strong a strong div b div div div
为什么 Oracle 在取消引用对象时需要视图中的列的别名？

为什么 Oracle 在取消引用对象时需要视图中的列的别名例如 CREATE VIEW view AS SELECT t eno t workdept dname t salary FROM table t ERROR at line 1
使用 d3-zoom 与 WebGL 交互

我正在尝试收集一个小示例该示例使用 d3 zoom 为使用 WebGL 渲染的画布元素提供简单的交互性我想做的就是提供平移缩放这使用 4x4 变换矩阵相当简单我遇到的问题是缩放缩放如果您查看一些 d3 zoom 示例您会发现

使用 d3-zoom 与 WebGL 交互

使用 d3-zoom 与 WebGL 交互 的相关文章

随机推荐

热门标签

使用 d3-zoom 与 WebGL 交互的相关文章