我正在尝试使用ctx.lineTo()在画布上绘制一些矩形.它们被绘制但是y坐标永远不对.矩形变得太高,在y轴上的错误位置.当我逐步使用调试器时,它会将lineTo()方法中的y坐标显示为正确,但我创建了一个canvas.click事件以提醒坐标(当我点击左上角时它是正确的,它会发出警报(0) ,0)).click事件显示y坐标实际上不是它将在lineTo()方法中绘制的状态.但是,x坐标始终是正确的.有一点需要考虑的是我通过将jtml附加到带有javascript的元素来创建我的画布,然后我添加了一个我绘制的图像.我重新缩放矩形的坐标,使它们适当地放在画布上,缩放到适合设备大小的图像大小.这是我从画布创建到使用lineTo()方法的所有代码.
Canvas在此方法的早期阶段创建(在appendPicture()中):
function appendSection(theSection, list) {
list.append('<label class="heading">' + theSection.description + '</label><br/><hr><br/>');
if (theSection.picture) {
appendPicture(list, theSection);
var canvas = document.getElementById('assessmentImage');
var ctx=canvas.getContext("2d");
canvas.addEventListener("mousedown", relMouseCoords, false);
var img=new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
}
img.src = "data:image/jpeg;base64,"+ theSection.picture;
img.addEventListener('load', function() {
if(theSection.allHotSpots.length > 0) {
for( var x = 0; x < theSection.allHotSpots.length; x++) {
appendHotSpot(theSection.allHotSpots[x], theSection.thePicture, ctx);
}
}
}, false);
}
appendSectionQuestions(theSection, list);
if (theSection.allSubSections) {
for (var x = 0; x < theSection.allSubSections.length; …Run Code Online (Sandbox Code Playgroud) 我试图通过单击并拖动鼠标指针来绘制一个圆.你在PowerPoint或其他方面的方式.圆圈的中心出现在奇怪的地方,我无法解释.
这是jsfiddle:https://jsfiddle.net/h8t3hfa2/2/
这就是我获得开始和结束位置的方式;
$('#c').mousedown(function(event) {
var parentOffset = $(this).offset();
circle = new Circle();
circle.start['x'] = event.pageX - parentOffset.left;
circle.start['y'] = event.pageY - parentOffset.top;
});
$('#c').mouseup(function(event) {
var parentOffset = $(this).offset();
circle.end['x'] = event.pageX - parentOffset.left;
circle.end['y'] = event.pageY - parentOffset.top;
circle.draw(canvas[0]);
});
Run Code Online (Sandbox Code Playgroud)
当我控制台记录中点时,它看起来是正确的,但圆圈显示在其他地方.有任何想法吗?