如何解决带有笔触和文本的画布缩放
我希望缩放在canvas
- 点击
plus
按钮>放大 - 点击
minus
按钮>缩小
我尝试过缩放,但是只有图像变大了。
test.html
<canvas id="img"></canvas>
<input type="button" id="plus" value="plus">
<input type="button" id="minus" value="minus">
<script>
const canvas = document.getElementById('img');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'test.PNG';
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.strokeRect(28,26,50,50);
ctx.textBaseline = 'top';
ctx.font="15px Verdana";
ctx.fillStyle = 'red';
ctx.fillText("TEXT",28,25 + 50 + 5);
ctx.fill();
ctx.scale(2,2);
ctx.restore();
};
</script>
<script>
const plus = document.getElementById('plus');
const minus = document.getElementById('minus');
</script>
解决方法
问题是-正如Kaiido在其评论中所暗示的-scale()
方法不会影响在调用缩放之前已在画布上绘制的任何内容。
如果您确实想要由context.scale驱动的缩放功能,则必须在 调用比例后重新绘制任何内容。
这是一个例子:
const canvas = document.getElementById('img');
const ctx = canvas.getContext('2d');
function zoomIn() {
myScale = myScale < 2.5 ? myScale += 0.5 : 2.5;
draw();
}
function zoomOut() {
myScale = myScale > 0.5 ? myScale -= 0.5 : 0.5;
draw();
}
function draw() {
ctx.clearRect(0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width / 2 - canvas.width / 2 * myScale,canvas.height / 2 - canvas.height / 2 * myScale);
ctx.scale(myScale,myScale);
ctx.drawImage(img,0);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.strokeRect(28,26,50,50);
ctx.textBaseline = 'top';
ctx.font = "15px Verdana";
ctx.fillStyle = 'red';
ctx.fillText("TEXT",28,25 + 50 + 5);
ctx.fill();
ctx.restore();
}
var img = new Image();
var myScale = 1;
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
draw();
};
img.src = 'https://picsum.photos/id/1/200/300';
const plus = document.getElementById('plus');
const minus = document.getElementById('minus');
plus.addEventListener("click",zoomIn);
minus.addEventListener("click",zoomOut);
<canvas id="img"></canvas>
<input type="button" id="plus" value="plus">
<input type="button" id="minus" value="minus">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。