Question

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

我希望能做到这样的事情：

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);
}

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

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

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

{{1}}

希望有人可以发一些亮点或指出我正确的方向！感谢

Answer 1

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

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

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

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

如果您想使用text()功能，那么您将使用检查鼠标位置的if语句走在正确的轨道上。但请注意，您正在检查mouseY 完全是否等于120，这只会让您点击一个像素。然后，if语句的第二部分不是有效的语法，因为您不能将条件与&&运算符一起串起来。你需要完全不平等。

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

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

Answer 3

我用这个为我工作：

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

Answer 4

SELECT CASE WHEN MONTH(getdate()) <10
        THEN YEAR(getdate()) -1
        ELSE YEAR(getdate())
        END

使用p5.js创建文本链接

4 个答案: