問題タブ [jquery-knob]

HTML5 Canvas を使用して jQuery Knob のような効果を実現したいと考えていますが、jQuery Knob が行うストローク カーソル効果ではなく、円のノブ/カーソルを使用します。

jQuery Knob コードに基づいて、onMouseMove イベントをサークル ノブ/カーソルに接続することができたので、マウスの位置の X 座標と Y 座標に従ってサークル ノブが移動します。ただし、この例のように円のパス上または円に沿ってのみ移動するようにノブを「制限」することはできないため、円のパス内をクリック/マウスダウンすると、円のノブがパス内に移動します。

上記の例のような Raphael ではなく、Canavas と jQuery のみを使用してこれを達成する方法はありますか?

私の考えの 1 つは、mousemove イベントがパスの外側で発生するたびに、円のノブをトラック (パス上) に戻すことでした (このように)。ただし、この計算を成功させるには運がありません。これを達成するために使用できる数学/幾何学の公式はありますか?

素晴らしいjqueryノブの拡張機能があり、それを度範囲入力に変換します。負の z インデックスを持つ div 内のノブに配置された透明なコンパス png 画像があるため、マウス クリックは画像​​ではなくノブと相互作用します。

ここで、背景色のない div にノブを配置すると、ページが読み込まれたときにコンパス png が表示されます。

ただし、含まれている div に背景色がある場合、png は、ユーザーが範囲のマーキングを開始した後にのみ表示されます (紫色の円で時計回りの範囲をドラッグします)。

ここに問題のデモがあります: http://infoxicate.me/testknob.html

編集：デモページは解決されたため、問題を示していません...

ノブのプロパティを拡張するためのこのコード スニペットがあります...

境界プロパティを含める方法は、たとえば、border = 1px solid #000; .... ここ

偽の循環ローディング効果のために、jQuery ライブラリの FineUploader と Knob を使用しています。

私の現在のコードは次のとおりです。

問題は、「ローダー」が 75% のアニメーションを終了する前に「完了」機能が実行されることです。

アニメーションが終了するまで「完了」コールバックを待機させたい...

おまけとして、アニメーションが実際に正確な valums fineuploader のパーセンテージを取るようにしたいので、それを偽造する必要はありません!

理解を深めるお手伝いができますか？お知らせ下さい！

ノブ/スライダーを使用してマップの不透明度を制御するマップの例を見つけました。これと同じノブ/スライダーを使用したいと思いますが、マップの一部ではなく別のものに使用したいと考えています。私はコード ( http://www.maptiler.org/google-maps-overlay-opacity-control/ ) を持っていますが、単にノブを保持して使用できるようにするために何を抽出する必要があるのか​​ わかりません(たとえば) 1 から 1000 までの数値を表示する Web ページ。

助けてください、ありがとう

私はjQuery 1.8とaterrienのjQuery-Knobを使用しています

入力によるアニメーションとrel属性による値の管理で円を作成しました。次のコードを確認してください。

http://jsfiddle.net/itskawsar/U72TB/で動作中のフィドルを確認できます

しかし、アニメーションを含む 1 つのページに複数の円が必要であり、それぞれが異なる値を保持します。したがって、入力フィールドを複数回複製し、それぞれの値も変更しました。しかし、今回は円の値を変更せずにうまく機能しています。

例として、3 つの入力があり、それぞれに 20、35、95 のrel属性があります。スクリプトを実行すると、スクリプトは 3 つの円すべてをアニメーションで作成し、20 で塗りつぶします。しかし、20、35、95 で塗りつぶす必要があります。助けてください。

前もって感謝します。

私は Web オーディオ API と JQuery ノブ ライブラリのような機能を持っていますが、完全ではありません。ノブ スライダーは入力スライダーを制御しますが、影響を与えたいパラメーターに値が渡されていないようです。

簡単な例については、次を参照してください。

http://jsfiddle.net/RKH35/1/

コード：

プロジェクトの 1 つで Jquery ノブを使用して、円形の入力コントロールを表示しています。HTML5 をサポートするすべてのブラウザーで正常に動作しますが、Micromax キャンバス A110 デバイスで表示すると、ノブの円が表示されませんか? これはブラウザの問題ですか、それともデバイスの問題ですか? よろしくお願いします。

先日、jQuery Knob に出会いました。これは、私が取り組んでいるプロジェクトに最適です。素晴らしい仕事アンソニー:

オブジェクトは、ノブを作成し、必要なデータを格納するオブジェクトの配列から収集したデータを使用してページに表示することです。

私が達成する必要があるのは、 $.each(data, function... ループまたは for ループのいずれかをループし、各ループの間に一時停止することです。

このようなもの：

setIntervals と setTimeout を試してみましたが、ある段階で動作するようになりましたが、jquery-knob.js ファイルのすべての css が読み込まれませんでした。これは、ノブを描画するための重要な部分です。

開発に関してはまだかなり未熟なので、説明付きの例は本当に役に立ちます。ありがとう。

最終的に、以下のコードで目的の効果を達成し、変数を解析してページを更新しましたが、これは回避策にすぎません。