Question

假设我们在一个画布上有几行问题而在另一个画布上有相应的答案。有一种方法可以通过鼠标拖动选择一个画布上的文本，相关文本在另一个画布上突出显示（或被删除） ??由于canvas只是一个绘图对象。我在两个文本中使用fillText绘制文本，但是canvas不记得它是否记不起坐标，这是不可能的，因为我的函数在不同的时间在不同的坐标下绘制随机文本。

Answer 1

如果您希望在文本被绘制后与其进行交互，则必须自己“记住”该文本 - 通常是将定义该确切文本的所有信息放入javascript对象中：

var question1={
    text:"What color is the sun?",
    answer:"The sun is yellow.",
    x:50,
    y:25
}

然后你可以使用该对象绘制（并可能重绘）你的问题和答案：

context1.fillText(question1.text, question1.x, question1.y);

context2.fillText(question1.answer, question1.x, question1.y);

如果您有多个文本，可以将它们存储在一个数组中：

var questions=[]

questions.push(question1);

然后您可以“记住”有关文本的信息：

var question=questions[0];

console.log("We asked: "+question.text+" at position "+x+"/"+y);

您可以使用有关文本的“记住”信息在第一个画布中进行点击测试，并在第二个画布中突出显示。

命中测试文本相对简单。你需要知道文本的像素长度，你可以使用context.measureText方法得到它：

var textWidth = context1.measureText(question1.text).width;

然后你可以通过检查鼠标是否在问题的边界框内来测试鼠标是否在问题之上。

// assume the text-height is approximately the font-size

context1.font="14px verdana";

var textHeight=14;

if(
    mouseX>=question1.x && 
    mouseX<=question1.x+textWidth &&
    mouseY>=question1.y &&
    mouseY<=question1.y+textHeight
) {
    console.log("The mouse is over the question");
}else{
    console.log("The mouse is not over the question");

}

关联多幅画布上的文字

1 个答案: