Question

我正在寻找帮助指导我正确方向的人，我正在努力创作。

我需要创建一个箭头，当在一定程度上，一棵树生长时，我已经为树木创建了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度等等处停止..同时加载新图像我已经分配到某个程度（无论箭头的尖端是什么at）所有这一切都是通过将鼠标悬停在上面。

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

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

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

Answer 1

以下是使用canvas在鼠标后面渲染箭头的示例。 http://jsbin.com/inufoy/edit

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

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

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

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

旋转箭头悬停在一定程度上着陆并加载图像

1 个答案: