Question

我想制作一张彩色的土耳其地图，就像在这张照片中的全宽html页面一样。重点是让用户为每个城市选择颜色。

在一天结束时，我希望有一个这样的场景：

为了做到这一点，我必须在下面合并两个脚本。但我找不到合适的方法。

第一个是地图：这是我repository的地址。

第二个是颜色选择器：jscolor

我想为每个城市使用colorpicker :(信息可能在下面的不同div中）

Answer 1

如果您想将2个Javascript文件的内容合并到1个文件中，那么只需创建一个新文件即可。 mapcolor.js并将地图文件的内容复制到此文件中，然后复制此文件末尾的colorpicker文件的内容。

如果你想将这两个javascript文件加载到你的页面中，那么你可以在你的html页面中这样做：

<html>
   <title>İnteraktif Türkiye Haritası</title>
   <head>
       <script type="text/javascript" src="js/jscolor.js"></script>
       <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
   </head>
   <body>
      <!-- Your body elements goes here... -->
   </body>
</html>

如果没有，那么请分享一些关于您希望实现的信息？

Answer 2

我建议您根据希望最终用户着色的地图构建图像地图。有大量的免费在线图像处理器，您可以用它来完成任务的这一部分，它将为您提供以下内容：

<div class="mapContainer">
  <img id="bottle_map" src="../images/bottle.jpg" usemap="#bottle_map">
  <map name="bottle_map">
    <area shape="rect" alt="" coords="3,6,258,31" href="#" title="Saranac Legacy IPA">
    <area shape="rect" alt="" coords="279,5,336,32" href="#" title="four generations">
    <area shape="rect" alt="" coords="2,37,425,64" href="#" title="four generations">
    <area shape="rect" alt="" coords="1,69,386,95" href="#" title="four generations">
    <area shape="rect" alt="" coords="243,121,444,142" href="#" title="Matt Brewing Company">
    <area shape="rect" alt="" coords="4,143,186,163" href="#" title="Matt Brewing Company">
    <area shape="rect" alt="" coords="194,144,400,163" href="#" title="Our (great) grandfather">
    <area shape="rect" alt="" coords="3,163,252,187" href="#" title="Our (great) grandfather">
    <area shape="rect" alt="" coords="295,166,419,185" href="#" title="it's still family">
    <area shape="rect" alt="" coords="3,189,363,209" href="#" title="it's still family">
  </map>
  <canvas class="ctxLight" id="canvMap"></canvas>
</div>

在您使用任何网站制作地图后，您应添加Div和画布标签，以便为您提供所有区域标签等。

从那里你可以使用HTML5的画布功能覆盖形状，以及你想要的任何颜色/不透明度在地图上

$(function() {
  var ctx;                                                                                                                                                                                                                                     
  var area;                                                                                                                                                                                                                                                                                                                                                                                                                                                                

  function calcDimension (obj) {
    var dimension = []
    position = obj.attr('coords').split(',');
    for (i = 0; i < 4; i++) {
      if (i < 2)
        dimension[i] = parseInt(position[i], 10);
      else
        dimension[i] = Math.abs(position[i -2] - position[i]);
    }
    return dimension
  }

  $('.mapContainer').css( {
    "position": "relative",
    "display": "inline-block"
  } );
  $('.imgLight').css( {
    "position": "absolute",   // necessery styling for                                                                                                                                                                                       
    "z-index": "1"            // layering image and canvas                                                                                                                                                                                   
  } );
  $('.ctxLight').css( {                                                                                                                                                                            
    "position": "relative",                                                                                                                                                         
    "z-index": "2",
    "pointerEvents": "none"
  } );

  ctx = document.getElementById('canvMap').getContext('2d');
  $('#canvMap').attr('width', $('#bottle_map').width());
  $('#canvMap').attr('height', $('#bottle_map').height());

  $('map > area').click(function() {
    area = calcDimension($(this));
    ctx.clearRect(area[0],area[1],area[2],area[3]); //prevents img stacking
    ctx.fillStyle = "rgba(0, 255, 0, 1)"; //last number is opacity
    ctx.fillRect(area[0],area[1],area[2],area[3]);
  } );
} );

基本上，当在图像地图上单击某个区域时，画布将在所单击的区域上绘制。

我刚刚给你的东西不会在再次点击时清除掉色彩。我相信你可以想出一些关于你希望如何工作的逻辑。清除它所需的只是致电：

ctx.clearRect(x1, y1, w, h);

我给你的calcDimension函数将为你返回这4个数字，所以你只需要传递一个包含用户点击的区域的jQuery obj。

您可以使用问题中列出的颜色选择脚本生成十六进制颜色值，然后将其转换为标准引导引擎可以解释的0-255 rgb值。

结合2个javascript脚本

2 个答案: