Question

我需要转换此区域地图：

<area shape="poly" coords="61,134,61,129,63,124,61,120,64,116,62,112,66,108,67,111,70,109,72,107,73,101,72,97,69,95,72,92,73,96,72,106,76,108,76,110,78,113,82,113,83,120,93,127,102,123,107,129,104,130,92,130,81,125,77,122,75,122,68,129,67,130,67,130,73,124,67,130,67,130,73,124,74,119" href="javascript:;" alt="formentera" >

使用jquery和canvas：

进入以下格式之一

..
var canvasi = document.getElementById("canvasIbiza");
      $.stx = canvasi.getContext("2d");
..
case"ibizaciudad":
            $.stx.save();
            $.stx.beginPath();
            $.stx.moveTo(77.6, 58);
            $.stx.bezierCurveTo(77, 57.9, 75.8, 57.7, 75.2, 57.3);
            $.stx.bezierCurveTo(74.5, 56.9, 74.3, 56.1, 73.9, 55.5);
            $.stx.lineTo(71.3, 56.3);
            $.stx.bezierCurveTo(70.5, 56, 69.7, 55.5, 69, 55.2);
            $.stx.bezierCurveTo(67.6, 54.6, 65, 53.7, 64.8, 53.7);
            $.stx.bezierCurveTo(64.7, 53.7, 63.4, 53.9, 63.2, 53.9);
            $.stx.bezierCurveTo(63.1, 53.9, 63, 53.8, 62.8, 53.8);
            $.stx.bezierCurveTo(63.4, 54.4, 64.2, 54.8, 64.7, 55.6);
            $.stx.bezierCurveTo(65, 56.2, 64.9, 57, 65, 57.8);
            $.stx.bezierCurveTo(65.5, 58.1, 68.3, 59.5, 68.3, 59.9);
            $.stx.bezierCurveTo(68.3, 60.2, 66.7, 61.8, 66.7, 61.9);
            $.stx.bezierCurveTo(66.9, 62.1, 69.1, 63.8, 69.1, 64);
            $.stx.bezierCurveTo(69.1, 64.1, 69.1, 64.2, 69.1, 64.2);
            $.stx.lineTo(71.4, 63.4);
            $.stx.lineTo(70.8, 61.4);
            $.stx.lineTo(73.6, 62.1);
            $.stx.lineTo(73.4, 58.6);
            $.stx.lineTo(78.4, 61.2);
            $.stx.lineTo(77.6, 58.4);
            $.stx.lineTo(77.6, 58);
            $.stx.closePath();
            $.stx.fillStyle = a;
            $.stx.fill();
            $.stx.restore();
            break;

对应区域的地图是：

<area shape="poly" coords="80,57,78,57,76,55,74,56,71,55,67,53,66,53,65,53,67,55,67,57,71,59,69,61,71,63,71,64,73,63,73,61,76,62,76,58,81,61,80,58,80,57,80,57" href="javascript:;" alt="ibizaciudad" >

以前的开发人员这个和我不知道它是如何工作的，

有什么想法吗？

它之间是否存在真正的关系？我真的看不到关系

Answer 1

这两个area元素用于两个不同的区域。： - ）

第一个代表底部岛屿部分（Formentera），而第二个部分（ciudad = city）排列在岛屿西北部的某个城市 - 它们与画布没有任何关联或组合这样

所以以前的开发人员所做的事情并不清楚，但是更好的实现可能只是为了消除引渡的某些角落。

要简单地将区域多边形地图区域转换为画布，您可以简单地从元素中提取多边形坐标，并在它们表示像素时直接应用它们。

首先是一个直接使用多边形的示例，然后是一个示例，该示例显示了另一种平滑线以匹配Bezier方法的方法。

第一个例子 - 多边形线：

<强> ONLINE DEMO HERE

var canvasi = document.getElementById("canvasIbiza"),

    /// get area element
    area = $('area:first'),

    /// get the coords from its attribute and covert to array
    coords = area.attr('coords').split(','),

    i = 0, len = coords.length;

$.stx = canvasi.getContext("2d");    

/// loop through the coordinate couples
$.stx.beginPath();

for(;i < len; i += 2) {
    i === 0 ? $.stx.moveTo(coords[i], coords[i + 1]) : $.stx.lineTo(coords[i], coords[i + 1]);
}

$.stx.closePath();

/// stroke or fill path
$.stx.stroke();

这将呈现这个大纲：

Polygon

如果您需要平滑的线条，我建议您查看我的canvas extension curve以获得通过积分的基本样条曲线。

然后，您只需稍微修改代码，不需要循环，因为curve默认采用数组：

第二个示例 - 平滑的多边形线：

<强> ONLINE DEMO HERE

$.stx.beginPath();

$.stx.curve(coords, 1);  /// coords and tension set to 1.0 (default 0.5)

$.stx.closePath();
$.stx.stroke();

没有那么大的区别，因为这些坐标图像非常小但是这导致：

Smoothed polygon

如果您同时运行这两个区域，您将看到它们位于不同的位置：

Both areas

图像地图坐标到Canvas线？

1 个答案: