JavaScript 和 Canvas 绘图不正确
[英]JavaScript and Canvas not drawing correctly
问题描述
有一些代码可以在 canvas 上显示图像，该图像存储为文本区域内的“数据：图像/png；base64”。 这一切都有效，但由于某种原因，我无法让它的绘制部分正常工作。 它只是在 canvas 的左上角画了一个小标记。
HTML：
<html>
<head>
</head>
<body>
<div class="container-fluid rtc-edges">
<div class="page-heading">
<div class="page-header">
<h1>Sign Test</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 middle-column">
<div class="form">
<textarea rows="4" maxlength="10000" id="rtc_benficiarysignature" class="textarea form-control" style="width:100%">data:image/png;base64,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</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
这是 JavaScript 代码：
window.onload = function() {
//get target field
var benficiarySignature = document.querySelector('#rtc_benficiarysignature');
var context;
var innerHtml = '<div class="canvas-wrapper">';
innerHtml += '<div class="canvas-area">';
innerHtml += '<canvas id="canvasSign"></canvas>';
innerHtml += '</div>'
innerHtml += '<div class="actions"><button type="button" id="btnClear">Clear</button><button type="button" id="btnOk">OK</button></div>';
innerHtml += '</div>';
//insert the above HTML before the textarea (need this because of where this will finally end up)
benficiarySignature.insertAdjacentHTML("beforebegin", innerHtml);
var mainCanvas = document.getElementById('canvasSign');
var btnClear = document.getElementById('btnClear');
var btnOk = document.getElementById('btnOk');
if(mainCanvas.getContext) {
context = mainCanvas.getContext('2d');
context.strokeStyle = "#000";
context.lineJoin = "round";
context.lineWidth = 2;
} else {
console.log('Failed to create context');
}
//click event to clear the canvas
btnClear.addEventListener("click", function(){
context.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
});
//click event to clear the canvas
btnOk.addEventListener("click", function(){
var tmpCanvas = mainCanvas.toDataURL("image/png");
if(tmpCanvas) {
benficiarySignature.value = tmpCanvas;
}
});
//display the image in the canvas area, if there is a value
if(benficiarySignature.value) {
//clear canvas, just to make sure
context.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
var img = new Image();
img.src = benficiarySignature.value;
//small delay to display signature
setTimeout(function() {
context.drawImage(img, 0, 0, mainCanvas.width, mainCanvas.height);
img.remove();
},500);
}
var clickX = clickY = clickDrag = [];
var paint;
/**
* Add information where the user clicked at.
* @param {number} x
* @param {number} y
* @return {boolean} dragging
*/
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
/**
* Draw the newly added point.
* @return {void}
*/
function drawNew() {
var i = clickX.length - 1
if (!clickDrag[i]) {
if (clickX.length == 0) {
context.beginPath();
context.moveTo(clickX[i], clickY[i]);
context.stroke();
} else {
context.closePath();
context.beginPath();
context.moveTo(clickX[i], clickY[i]);
context.stroke();
}
} else {
context.lineTo(clickX[i], clickY[i]);
context.stroke();
}
}
function mouseDownEventHandler(e) {
paint = true;
var x = e.pageX - mainCanvas.offsetLeft;
var y = e.pageY - mainCanvas.offsetTop;
if (paint) {
addClick(x, y, false);
drawNew();
}
}
function touchstartEventHandler(e) {
paint = true;
if (paint) {
addClick(e.touches[0].pageX - mainCanvas.offsetLeft, e.touches[0].pageY - mainCanvas.offsetTop, false);
drawNew();
}
}
function mouseUpEventHandler(e) {
context.closePath();
paint = false;
}
function mouseMoveEventHandler(e) {
var x = e.pageX - mainCanvas.offsetLeft;
var y = e.pageY - mainCanvas.offsetTop;
//alert('PageX: ' + e.pageX + ' | PageY: ' + e.pageY);
if (paint) {
addClick(x, y, true);
drawNew();
}
}
function touchMoveEventHandler(e) {
if (paint) {
addClick(e.touches[0].pageX - mainCanvas.offsetLeft, e.touches[0].pageY - mainCanvas.offsetTop, true);
drawNew();
}
}
function setUpHandler(isMouseandNotTouch, detectEvent) {
removeRaceHandlers();
if (isMouseandNotTouch) {
mainCanvas.addEventListener('mouseup', mouseUpEventHandler);
mainCanvas.addEventListener('mousemove', mouseMoveEventHandler);
mainCanvas.addEventListener('mousedown', mouseDownEventHandler);
mouseDownEventHandler(detectEvent);
} else {
mainCanvas.addEventListener('touchstart', touchstartEventHandler);
mainCanvas.addEventListener('touchmove', touchMoveEventHandler);
mainCanvas.addEventListener('touchend', mouseUpEventHandler);
touchstartEventHandler(detectEvent);
}
}
function mouseWins(e) {
setUpHandler(true, e);
}
function touchWins(e) {
setUpHandler(false, e);
}
function removeRaceHandlers() {
mainCanvas.removeEventListener('mousedown', mouseWins);
mainCanvas.removeEventListener('touchstart', touchWins);
}
mainCanvas.addEventListener('mousedown', mouseWins);
mainCanvas.addEventListener('touchstart', touchWins);
}
完整的代码可以在这里看到https://jsfiddle.net/trekmp00/gcjhtkra/2/并且非常感谢一些帮助尝试让它工作。 当您看到代码时，您会看到我正在通过 JavaScript 添加 canvas 和按钮，我必须这样做，因为我要将它注入到表单中，我无法直接访问表单布局或添加这样的自定义元素（来自 Microsoft CRM 门户）
1 个解决方案
解决方案1
0 已采纳 2022-08-19 10:07:04
如果你改变var clickX = [] clickY = clickDrag = [];
为var clickX = []; var clickY = []; var clickDrag = []; var clickX = []; var clickY = []; var clickDrag = [];
这使它工作
画布绘制不正确（不稳定）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.