1

我很高兴尝试制作一个小工具来测试屏幕尺寸。到目前为止，蓝色宽度正确调整大小，但高度和文本框没有。有人注意到这段代码有什么问题吗？

页面加载时的工具正确呈现。

在此处输入图像描述

/* Sizing Script */
$(document).ready(function() {                
    var canvas = $('#canvas');
    var h = $(window).height();
    var w = $(window).width();                
    var txt = ('height: ' + h + '\n\n' + 'width: ' + w);
    draw(canvas.attr('id'), canvas.height(), canvas.width(), txt);

    $(window).resize(function() {
        var h = $(window).height();
        var w = $(window).width();                   
        draw(canvas.attr('id'), canvas.height(), canvas.width(),txt);



    });
});
function draw( id, h, w, txt) {

    var paper = Raphael(id, '100%', '100%'); //create new paper instance based on holder height and width

    paper.setViewBox(0, 0, 1500, 1500, true);
    paper.clear();
    var height_h = paper.rect(10, 0, 100, 10).attr({
        fill: '#291919',
        stroke: '#291919'
    });               
    var height_l = paper.rect(10, h-10, 100, 10).attr({
        fill: '#291919',
        stroke: '#291919'
    });
    var height_v = paper.rect(55, 0, 10, h).attr({
        fill: '#291919',
        stroke: '#291919'
    });

    var width_l = paper.rect(0, 10, 10, 100).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });
    var width_r = paper.rect(w-10, 10, 10, 100).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });
    var width_h = paper.rect(0, 55, w-10, 10).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });

    var textbox = paper.rect(h/2 - 50, w/2 - 100, 200, 100).attr({
        fill: '#E6E6E6',
        stroke: '#ddd',
        'stroke-width': 5
    });
    var height_b = paper.rect(h / 2 - 12, w / 2 - 80, 125, 25).attr({
        fill: '#291919',
        stroke: '#ddd',
        'stroke-width': 5,
        opacity: 0.6
    });
    var width_b = paper.rect(h / 2 - 12, w / 2 - 45, 125, 25).attr({
        fill: '#549EFF',
        stroke: '#ddd',
        'stroke-width': 5,
        opacity: 0.6
    });
    var t = paper.text(h / 2 + 50, w / 2 - 50, txt).attr({
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif"                    
    });

}

HTML

<div id="canvas"></div>

CSS

body{
     width: 100%;
     height: 100%;
}
#canvas{
     width: 100%;
     height: 100%;                
     text-align: center;
     border: solid 1px black;
     padding: 0px;
     margin: 0 auto;
}

我创建了一个 jsfiddle，但它根本无法正确呈现。jsfiddle我猜如果我能解决高度问题，黑条和盒子都会正确渲染。有没有办法清除所有内容并在调整大小时强制重新渲染？

4

2 回答 2

1

问题解决了，想看的朋友可以看看。

Javascript

/* Sizing Script */
$(document).ready(function() {
    var canvas = $('#canvas');
    var h = $(window).height();
    var w = $(window).width();
    var txt = ('height: ' + h + ' px\n\n' + 'width: ' + w + ' px');
    draw(canvas.attr('id'), canvas.height(), canvas.width(), txt);

    $(window).resize(function() {
        var canvas = $('#canvas');
        canvas.empty();
        var h = $(window).height();
        var w = $(window).width();
        var txt = ('height: ' + h + ' px\n\n' + 'width: ' + w + ' px');
        draw(canvas.attr('id'), canvas.height(), canvas.width(), txt);
    });
});
function draw( id, h, w, txt) {

    var paper = Raphael(id, '100%', '100%'); //create new paper instance based on holder height and width
    var vert_width = w * .01;
    var vert_height = h * .01;
    var height_h = paper.rect(vert_width, 0, 100, vert_width).attr({
        fill: '#46FA70',
        stroke: '#46FA70'
    });
    var height_l = paper.rect(vert_width, h - vert_width, 100, vert_width).attr({
        fill: '#46FA70',
        stroke: '#46FA70'
    });
    var height_v = paper.rect(55, 0, vert_width, h).attr({
        fill: '#46FA70',
        stroke: '#46FA70'
    });

    var width_l = paper.rect(0, vert_height, vert_height, 100).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });
    var width_r = paper.rect(w - vert_height, vert_height, vert_height, 100).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });
    var width_h = paper.rect(0, 55, w - vert_height, vert_height).attr({
        fill: '#549EFF',
        stroke: '#549EFF'
    });

    var txtbox = [80, 75];
    var textbox = paper.rect(txtbox[0] , txtbox[1] , 200, 100).attr({
        fill: '#E6E6E6',
        stroke: '#ddd',
        'stroke-width': 5
    });
    var height_b = paper.rect(txtbox[0]+37, txtbox[1]+19, 125, 25).attr({
        fill: '#46FA70',
        stroke: '#ddd',
        'stroke-width': 5,
        opacity: 0.6
    });
    var width_b = paper.rect(txtbox[0]+ 37, txtbox[1] + 55, 125, 25).attr({
        fill: '#549EFF',
        stroke: '#ddd',
        'stroke-width': 5,
        opacity: 0.6
    });
    var t = paper.text(txtbox[0] + 100, txtbox[1] + 50, txt).attr({
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif"                    
    });

}

和 CSS

body{
    width: 100%;
    height: 100%;
    background:#000000;
}
#canvas{
    background:#FFFFFF;
    width: 100%;
    height: 100%;                
    text-align: center;
    border: solid 1px black;
    padding: 0px;
    margin: 0 auto;
}
于 2012-09-19T18:09:54.997 回答
1

虽然你已经回答了你自己的问题，但我今天晚上在回家的路上看着这个，想和你分享我的想法。

在调整大小时重新创建纸张没有开销，我只是重新定位现有元素并调整纸张大小。

您或其他人可能会发现它很有用。我更新了你的jsfiddle。

    $(document).ready(function() {
        var canvas = $('#canvas'), paper, 
        top, vCentre, bottom, left, hCentre, right;
        var w = $(window).innerWidth();
        var h = $(window).innerHeight();
        draw(canvas.attr('id'), w, h);

        // on resize call the update with new dimensions
        $(window).resize(function() {
            w = $(window).innerWidth();
            h = $(window).innerHeight();
            update(w,h);
        });
    });

    // draw function takes id, width and height
    function draw( id, w, h) {
        paper = Raphael(id, '100%', '100%'); 

        // create our rectangular sections
        top = getRect(0, 0, 100, 10, '#46FA70');
        vCentre = getRect(45, 0, 10, h, '#46FA70');
        bottom = getRect(0, h-10, 100, 10, '#46FA70');
        left = getRect(0, 0, 10, 100, '#549EFF');
        hCentre = getRect(0, 45, w, 10, '#549EFF');
        right = getRect(w-25, 0, 10, 100, '#549EFF');
    }

    // helper to create rectangles
    function getRect(x, y, w, h, color){
        return paper.rect(x, y, w, h).attr({
            fill: color,
            stroke: color
        });
    }

    // update the paper and reposition the rect elements
    function update(w, h){
        paper.setSize(w, h);

        // reisize vertical centre and move bottom
        vCentre.attr({height: h-10});
        bottom.attr({x:0, y:h-10});

        // resize horizontal centre and move right
        hCentre.attr({width: w-10});
        right.attr({x:w-10, y:0});
    }
于 2012-09-19T22:29:27.813 回答