使用p5.js创建文本链接

Question

我目前正在尝试使用p5.js创建一个网站。我想创建一个链接，将链接到网站上的另一个页面。

我希望做这样的事情：

function setup(){
link = text("this is a link", 120, 120);
}

function draw(){
  if (link.mousePressed){
    link(www.example.com); //does the processing link function move to p5?
}

假设这样的东西不起作用，我可以做一些基于坐标的东西吗？

function setup(){
link = text("this is a link", 120, 120);
}

function mousePressed(){
  if (mouseY == 120 && mouseX >= 110 && <= 130){ //range accounting for text length
    link(www.example.com);
}

如果以上都不可能，我可以使用p5 DOM.JS库吗？

text("<a href='http://www.google.com'>Enter Locke Design</a>", 120, 120);

希望有人可以解决一些问题，或指出我正确的方向！谢谢

Answer 1

你正在做的事情没有多大意义。 text()函数只是在屏幕上绘制一些文本。它与HTML无关或创建链接。

链接函数返回HTML，您可以将其附加到文档以创建链接。把它称之为你正在调用它是没有意义的，而且你甚至会引用错误，因为你甚至没有引用你的字符串值。有关使用here函数的示例，请参阅link()。

如果你想使用text()函数，那么你就可以使用if语句检查鼠标位置了。但请注意，您正在检查mouseY是否与120完全相同，if只给您一个像素点击。然后你的&&语句的第二部分是无效的语法，因为你不能只是将条件与text()运算符串起来。你需要完全不平等。

退后一步，你会感到困惑，因为你混淆了两种方法：使用P5.js（link()函数）显示内容，并使用HTML（

function mousePressed(){
  if (mouseY == 120 && mouseX >= 110 && <= 130){ 
    //range accounting for text length
    window.open("http://www.google.com", _self);
}

函数）显示内容。混合它们没有意义。您需要选择一种方法并继续使用。

再退一步，我不确定使用P5.js创建一个完整的网站是一个很好的方法。当然可以使用P5.dom库，但这是为了在现有网页上添加功能而设计的。如果您知道每次加载时都希望页面中有链接，那么只需将其放入HTML中即可。这就是它的用途。

Answer 2

我用这个并为我工作：

qazxswpoi