Question

我需要创建一个由用户拖动360度左右的轮子（为了让轮子的特定部分位于顶部）。

我找到了一个使用HTML5画布的轮盘赌轮的例子，它只是随机旋转一个轮子的图像。但是，当允许用户按照自己的意愿拖动滚轮时，我很难过。

我还宁愿用HTML / CSS制作方向盘，而不是使用图像，因为它需要动态更新。

Answer 1

Sencha绘图框架允许您执行您在闪存中可能已经完成的任何操作 - 但没有闪存。它适用于几乎所有没有插件的浏览器。它根据浏览器使用SVG或VML。看一下可拖动的老虎示例here

修改：

作为较大ExtJS框架一部分的绘图框架的文档位于：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.draw.Component

这是我为可拖动的圆圈/滚轮敲下的代码。没有任何旋转动作，因为我认为你已经解决了。

<script src="ext-all-debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady( function() {

            //create the drawing surface
            var drawComponent = Ext.create('Ext.draw.Component', {
                width: 400,
                height: 400,
                draggable: {
                    constrain: true,
                    constrainTo: Ext.getBody()
                },
                autoShow:true,
                floating: true,
                renderTo: Ext.getBody(),
                items:[{
                    //add the circle sprite to the
                    //drawing surface
                    type: 'circle',
                    fill: '#79BB3F',
                    "stroke-width": "1",
                    stroke: "#000",
                    radius: 100,
                    x: 100,
                    y: 100
                }]

            });

        });
    </script>

Answer 2

mmm这看起来像是一个数学问题......

所以定义一个中心点，然后使用三角法定义从地平线开始的线条角度（从中心点到鼠标）

http://en.wikipedia.org/wiki/Trigonometry

现在画在cnavas内部中心点的画布上，根据需要获得角度并重新绘制

Answer 3

您可能希望使用Canvas绘制：http://diveintohtml5.info/canvas.html

要拖动滚轮，您需要处理鼠标按下，鼠标移动和鼠标移动事件。

在HTML5 / JavaScript中创建用户可转动滚轮的最佳方法是什么？

3 个答案: