-
2020-01-01 00:00
- 10
- 25
- 0
问题描述
使用canvas实现画板功能,当画布被放大后,不能正常绘制,坐标位置不正常
问题出现的环境背景及自己尝试过哪些方法
尝试通过canvas自带的scale属性在放大时扩大坐标
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!-- 申请表 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<link href="../css/loading.css" rel="stylesheet" />
<style>
#canvasBox{
/*overflow: scroll;*/
}
.icon-Back {
font-size: 28px;
line-height: 44px;
}
.dd{
color: #fff;
}
.icon-Back::before {
color: #fff;
}
header {
background: #bf1f2b !important;
font-size: 17px !important;
max-height: 44px;
min-height: 44px;
}
#can{
margin-top: 44px;
/*display: block;*/
}
.but{
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left:0;
display: flex;
flex-flow: wrap;
justify-content: space-around;
}
.but button{
width: 30%;
}
.ban{
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav NewHeader1">
<a class="icon-Back"></a>
<!-- <a id="myNewWorkS" class="mui-pull-right mySubmit"></a> -->
<h1 class="mui-title">
<span class="dd">Work Order Form</span>
</h1>
</header>
<div id="canvasBox">
<!--<canvas id="can" height="500" width="300"></canvas>-->
</div>
<div class="but">
<button type="button" id="signature">签名</button>
<button type="button" id="save">保存</button>
<button type="button" id="eliminate">清除</button>
<!--<input type="button" value="保存图片" onclick="save_pic()">
<input type="button" value="清除画布" onclick="clear_pic()">-->
</div></body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/hidpi-canvas.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../lib/pinchzoom.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();</script>
<script type="text/javascript">
var bot; //画布div
var canvas; //创建画布
var context; //获取上下文
var scrnWidth, scrnHeight;
var start_x, start_y, move_x, move_y, end_x, end_y;
window.onload = function() {
//获取页面宽高
scrnWidth = document.body.scrollWidth;
scrnHeight = document.body.scrollHeight;
// 将图片画到画布上
var img = new Image;
img.src = "http://172.16.10.238:8020/VsCodeDemo/pdfDemo/img/11.png";
img.onload = function() {
var p = img.width / img.height;
var imgwidth = scrnWidth;
var imgheight = scrnWidth / p;
console.log("1宽 = " + imgwidth + "高 = " + imgheight);
// $("#canvasBox").html("<canvas id='can' width=" + imgwidth + " height=" + imgheight + "></canvas>");
document.getElementById("canvasBox").innerHTML = "<canvas id='can' width=" + imgwidth + " height=" + imgheight + "></canvas>";
//创建画布
canvas = document.getElementById("can");
context = canvas.getContext("2d");
bot = document.getElementById("canvasBox");
imgwidth = canvas.width;
imgheight = canvas.width / p;
console.log("2宽 = " + imgwidth + "高 = " + imgheight);
img.width = imgwidth;
img.height = imgheight;
context.drawImage(img, 0, 0, img.width, img.height);
$('#btn').bind("myclick",function(){
});
jQuery("#signature").on("tap",function(e){
addListener();
function addListener(){
$('#canvasBox').on('touchmove',function(e){
e = e || window.e;
e.preventDefault();
e.stopPropagation();
})
$("#can").addClass("myCan");
}
})
jQuery("#save").on("tap",function(){
removeListener();
function removeListener(){
$('#canvasBox').off('touchmove');
$("#can").removeClass("myCan");
}
// 签名文件的base64
// var image = document.getElementById("can");
// image.src = canvas.toDataURL("image/png", 1);
// console.log(image.src);
})
// 图片放大功能
var DynamicScaling = function (){
$('#canvasBox').each(function () {
new RTP.PinchZoom($(this), {});
});
}();
//按下
jQuery("#canvasBox").on("touchstart",".myCan",function(e) {
start_x = e.touches[0].pageX;
start_y = e.touches[0].pageY;
console.log("start_x :" + start_x + " start_y : " + start_y);
//开始本次绘画
context.beginPath();
//画笔起始点
context.moveTo(start_x, start_y);
})
jQuery("#canvasBox").on("touchmove",".myCan",function(e) {
move_x = e.touches[0].pageX;
move_y = e.touches[0].pageY;
//根据鼠标路径绘画
context.lineTo(move_x, move_y);
//立即渲染
context.stroke();
})
jQuery("#canvasBox").on("touchend",".myCan",function(e) {
end_x = e.changedTouches[0].pageX;
end_y = e.changedTouches[0].pageY;
//创建从当前点到开始点的路径
context.closePath();
})
}
}</script>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
预期效果: 当用户放大图片后点击签名按钮,签名的笔迹应该随着图片的缩放而改变坐标位置
实际效果: 放大图片后,点击签名,签名的笔迹根据放大之前的原图坐标绘制,导致错误
- 共 0 条
- 全部回答
-
无妄ヘ 普通会员 1楼
这个问题可能是因为你的canvas元素没有正确设置宽度和高度。你可以通过改变canvas元素的宽度和高度来解决这个问题。以下是一个示例：
```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
canvas.width = 200; canvas.height = 200;
// 设置canvas元素的宽度和高度 canvas.width = canvas.width * 2; canvas.height = canvas.height * 2;
// 设置canvas元素的背景颜色 ctx.fillStyle = 'red'; ctx.fillRect(0, 0, canvas.width, canvas.height); ```
在这个示例中，我们首先获取了canvas元素，并设置了它的宽度和高度。然后，我们设置了canvas元素的背景颜色为红色。最后，我们使用fillRect方法在canvas上绘制一个矩形。
如果你的画布已经放大，那么即使canvas元素的宽度和高度被正确设置，绘制的矩形也可能无法正确显示。这是因为当你放大画布时，canvas的大小也会随之扩大。因此，你需要确保你的矩形的大小在放大后仍然与画布的大小相匹配。
如果你的画布已经放大，你可能需要考虑使用其他方法来绘制矩形，例如使用canvas的offset方法来计算矩形的位置，或者使用requestAnimationFrame方法来更新矩形的位置。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部