Question

我正在工厂识别网站上工作，我们希望人们能够轻松找到照片中的特定植物。照片区域中的每个植物都包含在一个div中，我想制作一个箭头（如图中所示：http://www.plantiferate.com/ArrowExample2.jpg），它来自右侧植物列表中的一个点（左边/垂直）中间的文字“秋炽梨”）位于照片中红色梨树区域上方div的右边缘/垂直中间。

这是我现在所拥有的简化版本，没有箭头。任何想法如何使用CSS和/或JQuery完成这样的事情？谢谢！

<div class="photoareacontainer">

<div class="photoarea">
    <img src="URL" class="photobackground" width="800" height="600" />
    <div class="highlight-region" ID="autumnblazepearphoto" 
        style="top:400px;left:200px; width:300px; height:#300px;" title="Autumn Blaze Callery Pear: ..."></div>
    <div class="highlight-region" ID="weepingwillowphoto" 
        style="top:350px;left:500px; width:300px; height:#300px;" title="Weeping Willow: ..."></div>
</div>

<div class="photocontentsarea">
    <a href="#">Autumn Blaze Pear</a><br />
    <a href="#">Weeping Willow</a><br />
</div>

Answer 1

我在演示中使用了一个字体很棒的箭头，请看https://jsfiddle.net/DIRTY_SMITH/y3v9n0b8/

.fa-long-arrow-left{font-size: 40px; margin: 100px;}

.fa-long-arrow-left {

/* Safari */
-webkit-transform: rotate(-45deg);

/* Firefox */
-moz-transform: rotate(-45deg);

/* IE */
-ms-transform: rotate(-45deg);

/* Opera */
-o-transform: rotate(-45deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Answer 2

Fiddle with canvas 我在链接和图像之间叠加了一个画布，并且有一个函数可以计算链接和图像的坐标，并在单击它时在它们之间绘制一个箭头。

$(document).on('click','a',function(){ var c = document.getElementById("arrows"); var ctx = c.getContext("2d"); var start = arrowcoords(this); var end = arrowcoords(document.getElementById($(this).html())); canvas_arrow(ctx,start.left,start.top,end.left,end.top); });

使用基于jqueries位置和宽度/高度的arrowcoords

function arrowcoords(el){
   var position = $(el).position();
   position.left+=$(el).width()/2;
   position.top+=$(el).height()/2;
   return position;
}

箭头取自Stack overflow about drawing arrow on canvas

如何使倾斜的CSS箭头指向div

2 个答案: