英文:
relationship of canvas scale and canvas size?
问题
我有一个 240x157 的 PNG 图片，而 div 的大小是 120x88。
所以，我创建了一个 240x157 的画布并粘贴了 PNG 图片。
div 的大小小于 PNG 图片，但 div 有滚动条，我可以通过拖动滚动条来查看整个图片。这很完美。
我的最终目标是让用户通过缩放来改变比例，当图片大于 div 时，出现滚动条，就像 Photoshop 等软件一样。
所以，我尝试了1/2的缩放比例，以在 129x78 中查看整个图片。
看起来成功了，但仍然保留了滚动条，而且滚动的区域不是必要的。
为什么会发生这种情况？
在我理解中，当画布大小为 240x157 且缩放比例为 1/2 时，整个大小应该显示为 120x78，为什么只有图片缩小而画布本身没有缩小？
翻译完成。
英文:
I have 240x157 png, and div size is 120x88
So,I made canvas 240x157 and paste png.
div size is smaller than png but div has scrollbar and I can see the whole picture with dragging bar. That's perfect.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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%2C_c._1900.jpg?dl=0";
chara.onload = () => {
ctx.clearRect(0, 0,240,157);
ctx.drawImage(chara,0,0,240,157);
}
<!-- language: lang-css -->
#whole{
border:1px solid;
width:120px;
height:78px;
overflow:scroll;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>
<!-- end snippet -->
My final goal is to change scale by user and when the picture is bigger than div, there appears scroll bar, like photoshop etc.
So, I test the 1/2 scale and see whole pic in 129 x78
It looks like succeed but there still remain the scroll bar, and it scrolls no necesarry area..
Why this happens?
In my understanding when canvas size 240x157 and scale is 1/2 whole size should be appeared 120x78, why only picture shrink not canvas itself?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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%2C_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);
}
<!-- language: lang-css -->
#whole{
border:1px solid;
width:120px;
height:78px;
overflow:scroll;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>
<!-- end snippet -->
答案1
得分: 1
你忘记改变画布的大小并设置 overflow:auto 以使滚动条消失：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
}
<!-- language: lang-css -->
#whole{
border:1px solid;
width:120px;
height:78px;
overflow:auto;
}
canvas{
margin:0;
display:block;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
You forgot to change size of the canvas and set overflow:auto so the scrollbars would disappear:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
}
<!-- language: lang-css -->
#whole{
border:1px solid;
width:120px;
height:78px;
overflow:auto;
}
canvas{
margin:0;
display:block;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论