1

我正在寻找一个人来帮助指导我为我正在尝试创建的功能朝着正确的方向前进。

我需要创建一个箭头，当树在一定程度生长时，我为树创建了 7 个不同的高度和 7 个不同的图像，以保持外观整洁。

基本上你知道如何拥有一张图片并使用它旋转它

<script type="text/javascript">
var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
    var center_x = (offset.left) + (img.width()/2);
    var center_y = (offset.top) + (img.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90; 
    img.css('-moz-transform', 'rotate('+degree+'deg)');
    img.css('-webkit-transform', 'rotate('+degree+'deg)');
    img.css('-o-transform', 'rotate('+degree+'deg)');
    img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}
</script>

但是我如何让我的箭头停在 20 度、25 度、30 度等处。同时加载我分配给那个特定度的新图像（无论箭头的尖端指向什么）所有通过悬停来执行此操作。

并且不仅停止并加载新图像，而且一旦用户单击提交，它就会将数据添加到我的数据库中的树表中。所以基本上，它是一个箭头，箭头的尖端设置在一定程度，加载新图像，获取图像的高度（我需要某种方式将高度变量分配给我猜测的每个单独的图像？）然后查询将其放入树高度字段下的树表中。

任何帮助，让我开始的链接将不胜感激。

另外，有没有办法用 Canvas 或 SVG 做到这一点？而不是使用箭头图像作为我的箭头？为了更干净的外观。

4

1 回答 1

1

下面是一个示例，说明如何使用canvas. http://jsbin.com/inufoy/edit

将箭头的旋转锁定到某些点就像过滤绘图函数上的参数一样简单。例如：

var segs = 7;
var coefficient = Math.PI / segs;
r -= ((r + coefficient) % (coefficient * 2)) - coefficient;

从那里您所要做的就是为每个图像分配一个旋转，并检查箭头何时指向树，然后加载树的图像。

编辑： 这是该脚本的另一个版本，带有静态箭头基，例如您的描述：http: //jsbin.com/inufoy/5/edit

于 2012-05-13T00:40:50.253 回答