如何将 url 链接添加到 WinWheel.js 图像切片？答案

【问题标题】：How do I add url links to WinWheel.js image slices?如何将 url 链接添加到 WinWheel.js 图像切片？
【发布时间】：2021-03-25 03:33:09
【问题描述】：

如何向任何图像切片添加可点击链接，以便用户可以单击切片以转到网址？目前他们可以转动轮子来获得随机的 url 选择。我使用“IF”让随机旋转部分正常工作，但我无法弄清楚图像切片点击的想法。

我目前在页面顶部的区域调用d：

//在这里添加代码？

if (clickedSegment) {
   clickedSegment.indicatedSegment = "Jane";
    window.location = "https://www.mikeloucas.com";
    theWheel.draw();

由于“clickedSegment”，我有一个 url 工作，但它在所有切片上都处于活动状态，而不是我需要的（我试图定位 Jane）所以我会坚持下去，除非有人有答案。

单独但相关的：这是我尝试添加添加链接的图像片段之一：

{'image' : 'https://mikeloucas.com/wheel/jane.png',  'text' : 'Jane'},

原始教程展示了如何在点击时更改切片的颜色，但我想改为转到一个 url。

原始点击码：http://dougtesting.net/winwheel/docs/tut15_get_segment_clicked

我正在做的事情：https://codepen.io/mikeloucas/pen/qBarWoP

在我的 Codepen 示例中，我关闭了“IF”加载 url，因为它在测试时会妨碍您，但您可以随意打开它来查看它的实际效果。它在页面下方大声笑；你会看到：

if (indicatedSegment.text == "Jane") {
window.location = "https://www.mikeloucas.com";

【问题讨论】：

标签： url canvas hyperlink

【解决方案1】：

曾经：

let clickedSegment= theWheel.getSegmentAt(e.clientX, e.clientY);

if (clickedSegment) {
       clickedSegment.indicatedSegment = "Jane";
        window.location = "https://www.mikeloucas.com";
        theWheel.draw();

现在：

    let segmentImage = theWheel.getSegmentAt(e.clientX, e.clientY);
    
      if (segmentImage.text == "Jane") {
      window.location = "https://www.mikeloucas.com";}
            
else if (segmentImage.text == "othername")...{
    }

...theWheel.draw();

诀窍（对我而言）是将“clickedSegment”更改为“segmentImage”，因为“segmentImage”已经在调用名称数组.我还添加了一个“ELSE IF”，因为我有很多切片可以使用。

在这里查看工作内容：https://codepen.io/mikeloucas/pen/qBarWoP

我的版本需要输入两次 URL 和 NAME LIST；如果有人知道如何做一次（一组而不是两组）但同时保持“CLICK url”和“SPIN url”的功能，那就太酷了，所以我仍然愿意接受建议。

我更喜欢一套而不是两套。 :-)

【讨论】：