我试图使用ctx.lineTo()在画布上绘制一些矩形。它们被绘制出来了,但是y坐标从未正确。矩形变得太高,并且在y轴上的位置不正确。当我使用调试器逐步执行时,它显示在lineTo()方法中的y坐标是正确的,但是我创建了一个canvas.click事件来警报坐标(当我在左上角单击时,它警报(0,0),这是正确的)。点击事件显示,y坐标实际上并不在它所声明的lineTo()方法中将要绘制的位置。然而,x坐标始终是正确的。需要考虑的一件事是,我通过javascript向一个元素添加html来创建我的canvas,并在其中添加一个图像进行绘制。我重新调整矩形的坐标,使它们适当地放置在缩放到设备大小的图像尺寸的canvas上。下面是从canvas创建到使用lineTo()方法的全部代码。
这里是appendPicture函数,它创建canvas标签并将其添加到一个元素中。
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; x++) {
var theSectionA = theSection.allSubSections[x];
appendSection(theSectionA, list);
}
}
}
这里是appendPicture函数,它创建canvas标签并将其添加到一个元素中。
function appendPicture(list, theSection) {
list.append('<div id="wrapper' + platform + '" style="width:100%; text-align:center">\
<canvas class="assessmentImageSmall" style="width:100%;height:' + Math.round(theSection.thePicture.ySize * (document.getElementById('assessmentSectionForm' + platform).clientWidth / theSection.thePicture.xSize)) + 'px" id="assessmentImage' + platform + '" align="middle" ></canvas>\
<!--<p style="color:#666;" id="imageInstruction">Tap image to enlarge.</p>-->\
</div>');
$("#wrapper").kendoTouch({
tap: function (e) {
switchImage();
}
});
}
这里是我绘制矩形的位置(在此函数中,我将矩形称为“热点”)。
function appendHotSpot(HotSpot, picture, ctx) {
var imageWidth = document.getElementById('assessmentImage' + platform).clientWidth;
var scale = imageWidth / picture.xSize;
HotSpot.topLeft = [Math.round(HotSpot.topLeft[0] * scale), Math.round(HotSpot.topLeft[1] * scale)];
HotSpot.bottomRight = [Math.round(HotSpot.bottomRight[0] * scale), Math.round(HotSpot.bottomRight[1] * scale)];
var rect = {x1: HotSpot.topLeft[0], y1: HotSpot.topLeft[1], x2: HotSpot.bottomRight[0], y2: HotSpot.bottomRight[1]};
ctx.strokeStyle="red";
ctx.beginPath();
ctx.moveTo(rect.x1, rect.y1);
ctx.lineTo(rect.x2, rect.y1);
ctx.lineTo(rect.x2, rect.y2);
ctx.lineTo(rect.x1, rect.y2);
ctx.lineTo(rect.x1, rect.y1);
ctx.stroke();
}