Javascript，在<img>上绘制文本窗口

Javascript, draw window with text over <img>

本文关键字：绘制 文本 窗口 img Javascript      更新时间：2023-09-26

我更喜欢更简单的桌面编程场景(当涉及到这类东西时，处理起来要简单得多)。

我有一个大的。png文件，我希望在浏览器中显示，这实际上是一个带有图标的地图，当用户悬停在图标上时，我想绘制(最好)各种图形窗口(可以是另一个预先设计的图像)，并将样式文本放在这个窗口(基本显示)。

.png是在<img>标签使用<map>和<area>，所以<canvas>和适用的javascript函数是不可能的，它不工作，从来没有透明的双重欺骗(已经尝试过了)。

顺便说一句，为什么我8岁的妹妹可以在Windows上用旧的IDE和语言完成这么简单的任务，而我却不能在浏览器上接近LOL!

有很好的方法可以做到这一点，使用画布甚至作为Google地图的自定义图层，但如果你不需要高级的平移和缩放，基本的HTML应该可以做到。

我会怎么做:

  • 显示img标签中的大图

  • 放入div容器，position: relative

  • 将每个图标以绝对位置放在地图上，例如position: absolute; left: 100px; top: 100px

  • 链接每个图标的onclick事件到jQuery UI对话框

CSS的粗略示例:

div.map { position: relative; width: 400px; height: 400px }
div.map .marker1 { position: absolute; left: 100px; top: 120px }
HTML: 

<div class="map">
  <img src="image.png">
  <img class="marker1" onclick="$( '#dialog' ).dialog();" src="marker.png">
</div> 
<!-- jQuery UI dialog -->
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. 
       The dialog window can be moved, resized and closed with the 'x' icon.</p>
 </div>

查看这个关于canvas等效图像映射的问题。从答案，特别是这个链接似乎持有的答案，尽管与画布和javascript(你不能得到的工作)。

你可能也会发现Mark Pilgrim的介绍HTML5画布很有用，特别是他的实例，因为它在画布上绘制图像和文本，并处理非常精确的点击。

相关文章：