搜尋

首頁  >  問答  >  主體

畫布尺度和畫布尺寸的關係?

<p>我有240x157 png,和div大小為120x88</p><p>所以,我製作了240x157的畫布並貼上png。 </p><p>div的大小比png小,但是div有捲軸,我可以用拖曳條看到整個圖片。這是完美的。 </p><p><code></code><code></code></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("test") var chara = new Image(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0"; chara.onload = () => { ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ border:1px solid; width:120px; height:78px; overflow:scroll; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.3.1/jquery.min.js"> ;</script> <div id="whole"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p> <p>我的最終目標是透過使用者改變比例,當圖片大於div時,會出現捲軸,如photoshop等。 </p><p>所以,我測試了1/2的比例,看到整個圖片在129 x78</p><p>看起來成功了,但是仍然有滾動條,它沒有滾動必要的區域。 </p><p>為什麼會這樣呢?</p><p>在我的理解中,當畫布尺寸為240x157,比例為1/2時,應該出現120x78,為什麼只有圖片收縮而不是畫布本身?</p><p><code></code><code></code></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("test") var chara = new Image(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0"; ctx.scale(1/2,1/2) // adding here. chara.onload = () => { ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ border:1px solid; width:120px; height:78px; overflow:scroll; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.3.1/jquery.min.js"> ;</script> <div id="whole"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p>
P粉621033928P粉621033928493 天前536

全部回覆(1)我來回復

  • P粉561323975

    P粉5613239752023-07-26 09:08:28

    你忘了改變畫布的大小並設定overflow:auto,這樣捲軸就會消失:


    const canvas = $('canvas')[0];
    
    var ctx = canvas.getContext('2d');
    console.log("test")
    
    var chara = new Image();
    chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";
    
    $zoom.addEventListener('input', () =>{
    
      const zoom = $zoom.value * .5;
    
      canvas.width = 240 * zoom;
      canvas.height = 157 * zoom;
    
      ctx.scale(zoom,zoom) // adding here.
    
      ctx.clearRect(0, 0,240,157);
      ctx.drawImage(chara,0,0,240,157);
    
    
    });
    
    
    chara.onload = () => { 
          ctx.clearRect(0, 0,240,157);
          ctx.drawImage(chara,0,0,240,157);
    
     }
    #whole{
      border:1px solid;
      width:120px;
      height:78px;
      overflow:auto;
      
    }
    canvas{
    margin:0;
    display:block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="$zoom" type="range" min="1" max="10" value="2">
    <div id="whole">
    <canvas id="test" width="240px" height="157px"></canvas>
    </div>

    回覆
    0
  • 取消回覆