简体   繁体   English

如何在KineticJS画布中向形状添加超链接?

[英]How do I add a hyperlink to a shape in a KineticJS canvas?

I'm working on my homepage which consists of several shapes being drawn in the middle of the screen using an HTML5 canvas and KineticJS, but I've run into a roadblock trying to add hyperlinks to each of the shapes. 我正在制作自己的主页,该主页由使用HTML5画布和KineticJS在屏幕中间绘制的几种形状组成,但遇到了一个障碍,试图为每个形状添加超链接。 My code thus far (which doesn't work) is: 到目前为止,我的代码(不起作用)是:

midHexPoly.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });

midHexPoly.on('mouseout', function() {
        document.body.style.cursor = 'default';
      }); //this works, the mouse changes to a pointer on 
          //mouseover, and back on mouseout

var linkTest = "http://www.google.com"
midHexPoly.on('click', function() {
    window.open = linkTest;
});

After much googling, I can't seem to find any resolutions to this issue, and there doesn't seem to be a function in Kintetic for redirecting or adding hyperlinks. 经过大量的搜索之后,我似乎找不到解决此问题的任何方法,并且在Kintetic中似乎没有用于重定向或添加超链接的函数。
Is there any way to fix this? 有没有什么办法解决这一问题? Thanks! 谢谢!

window.open is a method, so you should call it like so: window.open(linkTest); window.open是一个方法,因此您应该这样调用它: window.open(linkTest); . You'll find more info, such as its arguments on w3schools . 您会发现更多信息,例如w3schools的参数。 I suggest using the second argument (name) to make sure all links will open in the same new window. 我建议使用第二个参数(名称)以确保所有链接都将在同一新窗口中打开。

If however you want to open all links in the same window as your homepage, you could use this piece of code instead of window.open : location.assign(linkText); 但是,如果您想在与首页相同的窗口中打开所有链接,则可以使用这段代码代替window.open location.assign(linkText); .

If those don't work, make sure the click event is fired by adding a console log inside your callback function, eg 如果这些方法不起作用,请通过在回调函数中添加控制台日志来确保触发了click事件,例如

midHexPoly.on('click', function() {
    console.log('clicked on midHexPoly');
});

or 要么

midHexPoly.on('click', function() {
    alert('clicked on midHexPoly');
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM