这将是我的第二个HTML / CSS和Javascript项目，因此我非常初级。我试图让用户在画布上绘制一些形状/线条，然后使用称为“曲线匹配器”的外部库将预定形状与用户绘制的形状进行比较。
我首先在名为index.html的HTML文件中创建一个画布，供用户绘制。我有一个按钮可以清除画布，另一个按钮可以调用外部函数，然后显示相似度得分。使用下面的代码，效果很好。
<html>
<script type="text/javascript">
var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];
function init() {
canvas = document.getElementById('can');
canvas.style.backgroundColor = "#fffcf5";
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
coordinates.push({x:prevX, y: prevY});
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear");
alert(coordinates);
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
coordinates = [];
alert(coordinates);
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
function similarity(){
alert('stop');
// const rectangle = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}, {x: 4, y: 2}]
// const cuphandle = [{x: 1, y: 6}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 1}, {x: 6, y: 1}, {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 6}]
// const similarity = shapeSimilarity(rectangle, cuphandle);
// alert
}
</script>
<body onload="init()">
<canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<input type="button" value="Clear" id="clr" onclick="erase()">
<input type="button" value="similarity" id="fn" onclick="similarity()">
</body>
</html>
然后，我在另一个文件help.js中测试了曲线匹配器库。在这里，我基本上进行了测试，以查看外部功能是否按预期工作。
import { shapeSimilarity } from 'curve-matcher';
const rectangle = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}, {x: 4, y: 2}]
const cuphandle = [{x: 1, y: 6}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 1}, {x: 6, y: 1}, {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 6}]
const similarity = shapeSimilarity(rectangle, cuphandle);
console.log(similarity);
但是，当我尝试将HTML文件中的所有Javascript放入help.js时，不仅画布无法绘制，而且相似性（）函数也无法正常工作。这就是我“更改”文件的方式，但实际上只是从HTML文件复制并粘贴到JavaScript文件。代码如下。
index.html文件：
<html>
<body onload="init()">
<canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<input type="button" value="Clear" id="clr" onclick="erase()">
<input type="button" value="Similarity" id="fn" onclick="similarity()">
</body>
</html>
help.js文件：
import { shapeSimilarity } from 'curve-matcher';
var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];
const init = () => {
alert('does not initiate');
canvas = document.getElementById('can');
canvas.style.backgroundColor = "#fffcf5";
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
const draw = () => {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
coordinates.push({x:prevX, y: prevY});
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
}
const erase = () => {
alert("??")
var m = confirm("Want to clear");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
coordinates = [];
alert(coordinates);
}
const findxy = (res, e) => {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
const similarity = () => {
alert('hi');
const rectangle = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}, {x: 4, y: 2}]
const cuphandle = [{x: 1, y: 6}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 1}, {x: 6, y: 1}, {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 6}]
const similarity = shapeSimilarity(rectangle, cuphandle);
}
关于如何使这两个文件分别工作但又一起工作的任何想法？
之所以无法正常工作，是因为该主体在onload中调用了函数“ init”，但该函数仅在您的help.js文件中定义，该文件从未在主html文件中引用，因此甚至会导致错误如果您在html中有其他脚本，则可能会导致问题，但是特别是现在所有JavaScript都在另一个文件中
基本上只是添加脚本参考
<html>
<body onload="init()">
<script type="module" src="help.js"></script>
<canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<input type="button" value="Clear" id="clr" onclick="erase()">
<input type="button" value="Similarity" id="fn" onclick="similarity()">
</body>
</html>
但是还要在help.js函数本身中确保函数“ shapeSimilarity”存在于“ curve-matcher”中，其次要确保curve-matcher甚至是与其他目录在同一目录中的.jsm文件，您也可以导入之前需要先从Internet下载它，请通过在浏览器中按F12来检查控制台，以查看是否存在任何导入错误
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句