在HTML5/JavaScript中創建用戶轉輪的最佳方式是什麼？

我需要創建一個輪子，這個輪子將被用戶拖動360度（爲了讓輪子的一個特定部分放置在頂部）。在HTML5/JavaScript中創建用戶轉輪的最佳方式是什麼？

我已經找到了一個使用HTML5畫布的輪盤使用示例，它只是隨機旋轉一個輪子的圖像。但是，當允許用戶按照自己的意願拖動輪子時，我很難過。

我寧願使用HTML/CSS製作輪子，而不使用圖像，因爲它需要動態更新。

來源

2011-10-22 samiles

MMM這看起來像一個數學問題...

所以限定中心點並然後從地平線使用三角學來定義線的角度（從中心點到鼠標）

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

現在繪製的cnavas裏面的中心點WEEL畫布，讓角，並根據需要

來源

2011-10-25 20:59:59 Delta

Sencha繪圖框架允許您在FLASH中完成任何您可能已經完成的任務 - 但無需使用閃光燈。它適用於幾乎所有沒有插件的瀏覽器。它根據瀏覽器使用SVG或VML。看一看可拖動虎例如here

編輯：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.draw.Component

這是我撞倒了代碼：的繪圖框架，是國內規模較大的ExtJS框架的一部分

文檔可以發現可拖動的圓/輪。沒有采取任何紡紗行動，因爲我認爲你已經解決了。

<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>

來源

2011-10-22 13:18:42

很難找到重繪WEEL是在他們的網站或谷歌繪製的框架。他們的產品似乎付出了代價。它是免費的嗎？如果是這樣，它在哪裏？抱歉! – samiles

@samiles繪圖框架是其整個JavaScript框架Ext JS（http://www.sencha.com/products/extjs/download?page=a）的一部分。它可以免費下載並且是開源的。他們也是一個商業許可證 - 但它將取決於您是否需要購買其中一種 –

ExtJS框架的繪圖部分的文檔位於：http://docs.sencha.com/ext- JS/4-0 /＃！/ API/Ext.draw.Component –

你會想可能使用畫布繪製：http://diveintohtml5.info/canvas.html

對於拖你將需要處理按下鼠標，鼠標移動和鼠標了事件的車輪。

來源

2011-10-22 13:59:40

在HTML5/JavaScript中創建用戶轉輪的最佳方式是什麼？

回答

相關問題