时间戳

首页 > 解决方案 > 将“圆圈”添加到可点击的 javascript 函数中

javascript - 将“圆圈”添加到可点击的 javascript 函数中

问题描述

我有 js 允许受访者点击特定的形状/图像并使其可点击。目前我将其设置为允许矩形和多边形，但我想将“圆形”添加为形状，但我不确定如何执行此操作。我的代码在这里。“圆圈”代码不起作用。我试图重用 poly 脚本，但没有运气。这有点新，所以任何帮助将不胜感激！

function addClickable(shape, coords) {
    area.push('<area class="area" href="#0" shape="' + shape + '" coords="' + coords.join(",") + '" style="outline: none;" title="" />');
    if (shape.toLowerCase() == "rect") {
        highlight.push('<rect x="' + coords[0] + '" y="' + coords[1] + '" width="' + (coords[2] - coords[0]) + '" height="' + (coords[3] - coords[1]) + '" style="fill-opacity:0.7; fill: none;" class="highlight" />');
    }
    if (shape.toLowerCase() == "poly") {
        var newCoords = coords.join(" ").replace(/(\d+)\s(\d+)\s/g, '$1, $2  ');
        highlight.push('<polygon  points="' + newCoords + '" style="opacity: 0.7; fill: none;" class="highlight" />');
    }
    if (shape.toLowerCase() == "circle") {
        var newCoords = coords.join(" ").replace(/(\d+)\s(\d+)\s/g, '$1, $2  ');
        highlight.push('<circle  points="' + newCoords + '" style="opacity: 0.7; fill: none;" class="highlight" />');
    }
}

标签： javascriptcoordinatesshapes

解决方案

SVG<circle>没有 points 属性。

的语法<circle>是：

<circle cx="50" cy="50" r="50" />

此外，cx 和 cy 表示圆的中心点。

推荐阅读