web-dev-qa-db-ja.com

サイズ変更時にhtml5キャンバスを再描画

2つのキャンバス要素があり、ボタンをクリックしたときにサイズを変更する必要があります。

_<div class="sDetails"><div>
                        <div id="canvasDiv" style="width: 310px;"><canvas id="canvasGraph"></canvas></div></div>
<div class="kDetails"><div><div>
<div id="canvasDiv" style="width: 310px; height: 240px;"><canvas id="canvasGraph"></canvas></div></div>
_

およびスクリプト：

_   var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null;
    function drawCanvas(div) {
        canvas = document.querySelector(div + " #canvasGraph");
        ctx = canvas.getContext('2d');
        sketch = document.querySelector(div + " #canvasDiv");
        sketch_sl = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));
        tmp_canvas = document.createElement('canvas');
        tmp_ctx = tmp_canvas.getContext('2d');
        tmp_canvas.id = 'tmp_canvas';
        tmp_canvas.width = canvas.width;
        tmp_canvas.height = canvas.height;
        sketch.appendChild(tmp_canvas);
_

再描画機能：

_// here I must redraw my lines resized 2 times ( *cScale ) where cScale=2 or =1
function drawScales(ctx, canvas) 
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        ctx.beginPath();
        ctx.moveTo(5, 0);
        ctx.lineTo(0, canvas.height);
        scaleStep = 24*cScale;
_

何らかの理由でそれは本当にうまく機能せず、古いポジションは残ります。キャンバス全体を完全に削除して追加したり、完全に再描画したりする方法はありますか？

_canvas.width=canvas.width_を試し、ctx.clearRect(0, 0, canvas.width, canvas.height);tmp_ctx.clearRect(0, 0, canvas.width, canvas.height);を試し、$(".sDetails #canvasGraph")[0].reset();を試しました

論理的には、drawCanvas(".sDetails");drawLines(ctx, canvas);は最初から再描画する必要がありますが、そうではありません。

javascriptjqueryhtmlcanvasredraw
8
CodeGust

スケール変数を使用してスケールのサイズを変更することにしました。キャンバスのサイズを_canvas.width *= 2;_に変更してから、スケールを再描画します。

_var scaleStep;_

そしてそれをコードに追加します：ctx.lineTo(12*24*cScale+12, canvas.height-24);スケーリングを行う必要がある場所。 scaleStepは、キャンバスを最大化する場合は2、元のサイズに戻す場合は1です。

1
CodeGust

キャンバス要素のwidth＆heightのサイズを変更し、context.scaleを使用して、元の図面を新しく拡大縮小されたサイズで再描画します。

  • キャンバス要素のサイズを変更すると、キャンバスからすべての図面が自動的にクリアされます。

  • サイズを変更すると、すべてのコンテキストプロパティが自動的にデフォルト値にリセットされます。

  • context.scaleを使用すると、キャンバスが元の図面を自動的に再スケーリングして、新しいサイズのキャンバスに収まるので便利です。

  • 重要：Canvasは元の図面を自動的に再描画しません...元の描画コマンドを再発行する必要があります。

同じサイズの2つのキャンバスを使用した図（サイズは範囲コントロールによって制御されます）

enter image description here

左のキャンバスのサイズを大きくした図

enter image description here

右のキャンバスのサイズを大きくした図

enter image description here

これがサンプルコードとデモです。このデモでは、範囲要素を使用してサイズ変更を制御しますが、window.onresize内でサイズ変更+再描画を行うこともできます。

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var originalWidth=canvas1.width;
var originalHeight=canvas1.height;

var scale1=1;
var scale2=1;

$myslider1=$('#myslider1');
$myslider1.attr({min:50,max:200}).val(100);
$myslider1.on('input change',function(){
  var scale=parseInt($(this).val())/100;
  scale1=scale;
  redraw(ctx1,scale);
});
$myslider2=$('#myslider2');
$myslider2.attr({min:50,max:200}).val(100);
$myslider2.on('input change',function(){
  var scale=parseInt($(this).val())/100;
  scale2=scale;
  redraw(ctx2,scale);
});

draw(ctx1);
draw(ctx2);

function redraw(ctx,scale){

  // Resizing the canvas will clear all drawings off the canvas
  // Resizing will also automatically clear the context
  // of all its current values and set default context values
  ctx.canvas.width=originalWidth*scale;
  ctx.canvas.height=originalHeight*scale;

  // context.scale will scale the original drawings to fit on
  // the newly resized canvas
  ctx.scale(scale,scale);

  draw(ctx);

  // always clean up! Reverse the scale
  ctx.scale(-scale,-scale);

}

function draw(ctx){
  // note: context.scale causes canvas to do all the rescaling
  //       math for us, so we can always just draw using the 
  //       original sizes and x,y coordinates
  ctx.beginPath();
  ctx.moveTo(150,50);
  ctx.lineTo(250,150);
  ctx.lineTo(50,150);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle='skyblue';
  ctx.beginPath();
  ctx.arc(150,50,20,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(250,150,20,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();;
  ctx.arc(50,150,20,0,Math.PI*2);
  ctx.fill();
  ctx.stroke();
}

$("#canvas1, #canvas2").mousemove(function(e){handleMouseMove(e);});
var $mouse=$('#mouse');

function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();


  var bb=e.target.getBoundingClientRect();
  mouseX=parseInt(e.clientX-bb.left);
  mouseY=parseInt(e.clientY-bb.top);

  if(e.target.id=='canvas1'){
    $mouse.text('Mouse1: '+mouseX/scale1+' / '+mouseY/scale1+' (scale:'+scale1+')');
  }else{
    $mouse.text('Mouse2: '+mouseX/scale2+' / '+mouseY/scale2+' (scale:'+scale2+')');
  }

}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>Resize left canvas</div>
<input id=myslider1 type=range><br>
<div>Resize right canvas</div>
<input id=myslider2 type=range><br>
<h4 id=mouse>Mouse coordinates:</h4>
<canvas id="canvas1" width=300 height=300></canvas>
<canvas id="canvas2" width=300 height=300></canvas>
9
markE

スケールに依存しない位置が必要な場合は、代わりに正規化された値（[0、1]）を使用し、スケール係数としてキャンバスのサイズを使用できます。このようにして、実際のターゲットサイズをあまり気にすることなく、値をスケーリングおよび保存できます。

また、マウスの位置をほぼそのまま使用し、キャンバスのサイズで分割するだけで正規化することもできます。

例：

renderingの場合、(1 * canvas.width, 1 * canvas.height)の場合と同様に、（1,1）の点は常に右下隅に描画されます。

ポイントを保存する場合、たとえば、マウスの右下隅をクリックすると、マウスの位置を使用してキャンバスの寸法で分割します。サイズ400x200のキャンバスの場合、ポイントは400/400 = 1、200/200 = 1になります。

幅と高さは排他的であることに注意してください（つまり、width-1など）が、簡単にするために...

例

この例では、任意のサイズのキャンバスから開始し、正規化されたポイントを描画し、キャンバスのサイズを変更して、元の位置に比例してポイントを再描画することができます。

var rng = document.querySelector("input"),
    c = document.querySelector("canvas"),
    ctx = c.getContext("2d"),
    points = [];

// change canvas size and redraw all points
rng.onchange = function() {
  c.width = +this.value;
  render();
};

// add a new normalized point to array
c.onclick = function(e) {
  var r = this.getBoundingClientRect(),   // to adjust mouse position
      x = e.clientX - r.left,
      y = e.clientY - r.top;
  points.Push({
    x: x / c.width,                       // normalize value to range [0, 1]
    y: y / c.height
  });                                     // store point
  render();                               // redraw (for demo)
};

function render() {
  ctx.clearRect(0, 0, c.width, c.height); // clear canvas
  ctx.beginPath();                        // clear path
  for(var i = 0, p; p = points[i]; i++) { // draw points as fixed-size circles
    var x = p.x * c.width,                // normalized to absolute values
        y = p.y * c.height;
    
    ctx.moveTo(x + 5, y);
    ctx.arc(x, y, 5, 0, 6.28);
    ctx.closePath();
  }
  ctx.stroke();
}
canvas {background:#ddd}
<h3>Click on canvas to add points, then resize</h3>
<label>Width: <input type="range" min=50 max=600 value=300></label><br>
<canvas></canvas>
3
user1693593