0

我需要转换这个区域地图：

<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 和画布转换为以下格式之一：

..
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" >

以前的开发人员这样做了，我不知道它是如何工作的，

任何的想法？

坐标之间是否应该存在关系？实在看不出来关系

4

1 回答 1

3

这两个area元素适用于两个不同的......嗯，领域。:-)

第一个代表底部岛屿部分（福门特拉岛），而第二个代表（ciudad = 城市）在该岛的西北部排列了一些城市 - 它们与画布本身没有任何关联或组合。

所以之前的开发者做了什么还不清楚，但贝塞尔实现可能只是为了消除渲染的一些角落。

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

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

第一个例子 - 多边形线：

在线演示在这里

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

这将呈现这个大纲：

多边形

如果您需要平滑线，我建议您查看我的画布延伸曲线，以获得穿过这些点的基数样条。

然后，您只需稍微修改代码，不需要循环，因为curve默认情况下需要一个数组：

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

在线演示在这里

$.stx.beginPath();

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

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

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

平滑多边形

如果您同时运行这两个区域，您会发现它们位于不同的位置：

两个领域

于 2013-08-29T18:29:56.793 回答