使用 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

我使用它并为我工作：

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

Answer 2

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

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

如果您想使用text() 函数，那么您使用检查鼠标位置的if 语句是正确的。但请注意，您正在检查 mouseY 是否完全等于 120，这只会为您提供一个可供点击的像素。然后你的if 语句的第二部分不是有效的语法，因为你不能只是字符串条件以及&& 运算符。你需要一个完全不等式。

退后一步，您会感到困惑，因为您混淆了两种方法：使用 P5.js（text() 函数）显示某些内容，以及使用 HTML（link() 函数）显示某些内容。混合它们没有意义。您需要选择一种方法并采用该方法。

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

Answer 3

使用 window.open(... 将适用于 P5js 应用程序，但从用户体验的角度来看并不理想，因为根据浏览器设置和访问者可能安装的弹出窗口阻止程序，访问者很可能会收到有关打开的警告消息链接打开前的弹窗

使用 createA(href, html, [target]);，或者在从 P5js 创建任何 HTML 元素的情况下，通常很难相对于 P5js 画布正确定位 HTML 元素，尤其是如果您有响应式网站

我用来向用户展示可点击链接的一种技术是让 P5js 应用程序显示一个 HTML div，就像弹出模式对话框一样，据我了解，弹出窗口阻止程序不会阻止它

这是一个例子：

HTML

<div id="puzzle_canvas_id"></div>

<div id="popup-modal" style="display:none; position:fixed; top:20%; left:30%; width:20%; padding-bottom:50px; border-style:solid; border-width:1px; border-color:#999; border-radius:10px; background-color:#fff; z-index:9999">';
<p >Popup message...</p>
<a href="https://my-url.com">click here</a>
</div>

JS

function setup() {
var canvas = createCanvas(320, 240);
canvas.parent('puzzle_canvas_id');
}

function draw() {
}

function mouseClicked() {
var elem = document.getElementById('popup-modal'); 
elem.style.display = 'block'; 
}

Answer 4

createA(href, html, [target]);