Question

我正在寻找一个Javascript框架，可以帮助我为我的数据库中的图像添加图例。是）我有的： - ＆GT;一个JSON文件，其中包含图像上带有坐标的所有图例。

实施例。我有这张图片： 225_4.png

适合图像的JSON内容：{image": "225_4.png", "height": 37.16999999999996, "width": 65.46599999999998, "y": 67.57999999999993, "x": -62.54000000000005, "legend": "Vertebral _RL_ foramen _RL_ "}

这是一个网络应用程序，所以我正在用Javascript开发。

Answer 1

您可以使用canvas来实现此目的。

以下是一个例子：

var context = canvasElm.getContext("2d");

context.font = "20px serif";
context.fillStyle = "lightgreen";
  
$("#canvasElm").mousemove(function(e){

  context.clearRect(0, 0, canvasElm.width, canvasElm.height);// clear the canvas

  // check if the mouse pointer is over the sun or one of the planets.
  if(e.clientX >= 0 && e.clientX < 82 && e.clientY >= 0 && e.clientY < 126){
    context.fillText("The Sun", e.clientX, e.clientY);
  }else if(e.clientX >= 95 && e.clientX < 105 && e.clientY >= 60 && e.clientY < 70){
    context.fillText("Mercury", e.clientX, e.clientY);
  }else if(e.clientX >= 124 && e.clientX < 134 && e.clientY >= 58 && e.clientY < 68){
    context.fillText("Venus", e.clientX, e.clientY);
  }
});

img, canvas{
position:absolute;
left:0;
top:0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
  <img src="https://www.w3schools.com/tags/planets.gif"/>
  <canvas id="canvasElm"></canvas>
</body>
</html>

如果你运行此剪辑并将指针放在太阳或其中一个行星上，你会看到指针位置会出现一些文字。

您需要做的就是替换img元素的源代码并在mousemove回调函数内检查指针的位置是否在图例对象内定义的区域上。

从json文件

1 个答案: