HTML5 responsive Leinwand: die Größe des browser-canvas zeichnen Sie verschwinden

Möchte ich eine ansprechende Leinwand mit der Größe in Prozent und einmal Benutzer die Größenänderung des Fensters die Leinwand anpassen, relativ.
Ich bin in der Lage zu skalieren, die Leinwand von unten mit code, aber das einzige problem ist, wie ich scale die Größe des Fensters mit der Maus die Zeichnung verschwinden.

<style>
body{margin:0px;padding:0px;background:#a9a9a9;}
#main{
display:block;
width:80%;
padding:50px 10%;
height:300px;
} 
canvas{display:block;background:#fff;}
</style>
</head>
<body>
<div id="main" role="main">
<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>
</div> 

<script>

var c = document.getElementById('paint');
var ctx = c.getContext('2d');
var x = null;
var y;

c.onmousedown = function(e){
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);

}

c.onmouseup = function(e){
x=null;

}


c.onmousemove = function(e){
if(x==null) return;
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop; 
ctx.lineTo(x,y);
ctx.stroke();

}

$(document).ready( function(){
//Get the canvas &
var c = $('#paint');

var container = $(c).parent();

//Run function when browser resizes
$(window).resize( respondCanvas );

function respondCanvas(){ 
    c.attr('width', $(container).width() ); //max width
    c.attr('height', $(container).height() ); //max height

    //Call a function to redraw other content (texts, images etc)
}

//Initial call 
respondCanvas();

}); 


</script>

Dank.

InformationsquelleAutor iawara | 2013-04-08
  1. 11

    Umgang mit Inhalt bei Größenänderung des canvas

    Wenn Sie die Größe der Leinwand, die gezeichneten Inhalte werden immer gelöscht. Das ist, wie Leinwand verhält.

    Können Sie entweder aktualisiert den Inhalt nach der Größenänderung oder Sie speichern den Inhalt als Bild Daten und die Wiederherstellung nach der Größenänderung (siehe Leinwand.toDataURL).

    Hier ist der code, und eine Geige: http://jsfiddle.net/m1erickson/V6SVz/

    <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    //draw some content
    ctx.lineWidth=3;
    ctx.fillStyle="blue";
    ctx.strokeStyle="red";
    ctx.rect(50,50,100,50);
    ctx.fill();
    ctx.stroke();
    ctx.font="14px Verdana";
    ctx.fillStyle="white";
    ctx.fillText("Scale Me",65,75);

    function saveResizeAndRedisplay(scaleFactor){

        //save the canvas content as imageURL
        var data=canvas.toDataURL();

        //resize the canvas
        canvas.width*=scaleFactor;
        canvas.height*=scaleFactor;

        //scale and redraw the canvas content
        var img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
        }
        img.src=data;

    }

    $("#resizer").click(function(){ saveResizeAndRedisplay(1.5); });

}); //end $(function(){});
</script>

</head>

<body>
    <button id="resizer">Click to resize the canvas</button><br/>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>
    InformationsquelleAutor markE
  2. 3
    c.attr('width', $(container).width() ); //max width
c.attr('height', $(container).height() ); //max height

    der obige code ist äquivalent zu clearRect die verwendet wird, um deaktivieren Sie die Leinwand .so können Sie nicht passen Sie die Breite und Höhe, wenn Sie wollen behalten, was war vorher gezogen.
    als Lösung können Sie erstellen ein neues Bild mit der gewünschten Breite und zeichnen Sie die Inhalte der vorherigen Leinwand mit drawImage(c) c ist das canvas-Objekt .dann löschen Sie die Leinwand

    • Danke, So ist es eine option, um speichern Sie zuerst die Leinwand zeichnen und dann die c.attr().. oder jede andere Art der dynamischen responsive Breite/Höhe auf die Leinwand.
    InformationsquelleAutor Arun Killu
  3. 3

    Ich hatte auch das gleiche Problem, dass Sie konfrontiert sind, in der mu-Anwendung, und nach der Lektüre über es, ich kam zu diesem Schluss, dass das Verhalten von dem canvas-element möglich ist, so dass es löscht sich selbst nach der re-sizing, die einzige Lösung für dieses Problem ist es, fügen Sie einen listener für das Fenster-neu-Größe-Ereignis und zeichnen das canvas-Bereich, wenn das Ereignis aus, wenn Sie abgefeuert werden.

    $(window).resize(function(e) {
//function to redraw on the canvas
});



$(document).ready(function(e){
    var c = $('#example'); //getting the canvas element
    var ct = c.get(0).getContext('2d');
    var container = $(c).parent();
    $(window).resize( respondCanvas ); //handling the canvas resize
    function respondCanvas(){ 
        //makign the canvas fill its container
        c.attr('width', $(container).width() ); //max width
        c.attr('height', ($(container).height() -20 )); //max height
    }
    respondCanvas();
    make_image('images/india.png',1,1);
}

    Hoffe, es hilft.

    Quelle

    • Bitte geben Sie die Quelle beim kopieren von code aus einer website.
    InformationsquelleAutor Rahul Jain
  4. 2

    Dank. es war wirklich hilfreich. unten ist der code was ich versucht habe zu tun. 

    #main{
display:block;
width:80%;
height:300px;
background:#e0e0e0;
} 
canvas{display:block;background:#fff;border:1px solid red;}

</style>

<script>

$(function(){

var container=document.getElementById("main");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

//draw some content
//alert(canvas.width);

var w=$(container).width();
var h=$(container).height();



$(window).resize( saveResizeAndRedisplay );
function saveResizeAndRedisplay(){

    //save the canvas content as imageURL
    var data=canvas.toDataURL();

    //resize the canvas
    canvas.width = $(container).width();
    canvas.height = $(container).height();
    //alert($(container).width());

    //scale and redraw the canvas content
    var img=new Image();
    img.onload=function(){
        ctx.drawImage(img,0,0,img.width,img.height);
    }
    img.src=data;

}

saveResizeAndRedisplay();

}); 
</script>

</head>

<body>

<div id="main" role="main">
 <canvas id="canvas" width=200 height=150></canvas>
</div>

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = null;
var y;

canvas.onmousedown = function(e){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}

canvas.onmouseup = function(e){
x=null;
}


canvas.onmousemove = function(e){
if(x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop; 
ctx.lineTo(x,y);
ctx.stroke();
}
</script>
    InformationsquelleAutor iawara
  5. 2

    Ich habe ein jQuery-plugin, mit HTML5 canvas Größe. Es wurde gebaut, um die Lücke zwischen mobilen und desktop-Nutzern. Es ist immer noch ein WIP, aber es ist erweiterbar und hat einige grundlegende Zeichenfunktionen eingebaut.

    http://trsanders.github.io/responsive-sketchpad/

    InformationsquelleAutor tsanders
  6. 0

    Ich benutze diese Methode:

    var context = document.getElementById('paint').getContext('2d');
var canvas = context.canvas;

function responsive(width){
    var p = width / canvas.width;
    canvas.width *= p;
    canvas.height *= p;

    var scaleFactor = context.scaleFactor || 1;
    context.scale(p * scaleFactor, p * scaleFactor);
    context.scaleFactor = p * scaleFactor;
}

var mq = window.matchMedia("(min-width: 735px)");
mq.addListener(applyChanges);
applyChanges();

function applyChanges(){
    if(!mq)
        responsive(350);
    else
        responsive(735);
}
    InformationsquelleAutor karaxuna
  7. 0

    Ich hatte das gleiche problem. Meine Lösung ist die Verwendung der CSS3-Eigenschaft " zoom auf den übergeordneten container der Leinwand:

    <div id="parent_div">
    <div id="constructor_div">
         <canvas width="600" height="900">
    </div>
</div>

<script>
    constructor_zoom();

    $(window).resize(function() {
        constructor_zoom();
    });

    function constructor_zoom()
    {
        var parent_width = $('#parent_div').width();
        var item_width = $('#constructor_div').width();
        var coef = 0.1;

        $('.constructor_image').css('zoom', parent_width/item_width - coef);
    }
</script>

    coef - Koeffizienten zu machen, rückt der Leinwand aus den übergeordneten Rahmen. Sie können es null.

    Ich hoffe, es hilft jemandem 🙂

    InformationsquelleAutor Paul Basenko
Schreibe einen Kommentar