jQuery Jcrop APIパラメータ説明(中国語版)
3515 ワード
JcropはjQueryピクチャトリミングプラグインで、WEBアプリケーションにピクチャトリミングの機能を迅速かつ簡単に提供します.特徴は以下の通りである.すべてのピクチャに対してunobtrusively(侵入なし、DOMを簡潔に保つ) は、アスペクト比ロック をサポートする. minSize/max Size設定 をサポートは、選挙区または移動選挙区を変更する際のコールバック をサポートする.キーボードによる選択範囲の微調整をサポートする は、アニメーション効果 などのAPIによってインタラクティブに作成される. CSSスタイル をサポート
バージョンおよびDemo jQuery v1.5.1+ Jcrop v0.9.9 Demoアドレス:http://code.ciaoca.com/jquery/jcrop/demo/ ダウンロードアドレス:http://deepliquid.com/content/Jcrop_Download.html
optionsパラメータの説明(オプション)
パラメータ名
デフォルト
パラメータの説明
allowSelect
true
新規選択を許可
allowMove
true
選択範囲の移動を許可
allowResize
true
選択範囲のズームを許可
trackDocument
true
baseClass
"jcrop"
ベーススタイル名の接頭辞.説明:class=「jcrop-holder」で、変更されたのはその中のjcropだけです.
addClass
null
スタイルを追加します.class名が「test」であると仮定すると、スタイルを追加するとclass=「test jcrop-holder」になります.
bgColor
"black"
背景色.色キー、HEX、RGBどちらでも構いません.
bgOpacity
0.6
背景の透明度
bgFade
false
バックグラウンド遷移効果を使用するかどうか
borderOpacity
0.4
選択した枠線の透明度
handleOpacity
0.5
ズームボタンの透明度
handleSize
9
ズームボタンのサイズ
handleOffset
5
ズームボタンと枠線の距離
aspectRatio
0
ボックス幅の高さ比を選択します.説明:width/height
keySupport
true
キーボードコントロールをサポートします.キーリスト:上下左右(移動)、Esc(キャンセル)、Tab(裁断枠から飛び出して次へ)
cornerHandles
true
コーナーズームを許可
sideHandles
true
四辺ズームを許可
drawBorders
true
枠線の描画
dragEdges
true
外枠のドラッグを許可
fixedSupport
true
touchSupport
null
boxWidth
0
キャンバスの幅
boxHeight
0
キャンバスの高さ
boundary
2
境界.説明:境界からマウスをドラッグしてトリミング領域を選択できます.
fadeTime
400
過剰効果の時間
animationDelay
20
アニメーションの遅延
swingSpeed
3
かとそくど
minSelect
[0,0]
ボックスの最小選択サイズ.説明:選択ボックスがサイズより小さい場合は、自動的に選択解除されます.
maxSize
[0,0]
選択ボックスの最大サイズ
minSize
[0,0]
ボックスの最小サイズ
onChange
function(){}
ボックス変更時のイベント
onSelect
function(){}
セレクトボックスタイミングのイベント
onRelease
function(){}
選択解除時のイベント
使用方法
CSSファイルの読み込み
JavaScriptファイルの読み込み
画像タグにIDを付ける
Jcropを呼び出す
APIメソッドの説明
方法
方法の使用説明
setImage(string)
画像を設定(または変更)します.例:jcrop_api.setImage("newpic.jpg")
setOptions(object)
初期化設定パラメータと同じフォーマットのパラメータを設定(または変更)
setSelect(array)
[x,y,x 2,y 2]のパラメータ形式で選択ボックスを作成します.
animateTo(array)
アニメーション効果で選択ボックスを作成します.パラメータのフォーマットは[x,y,x 2,y 2]です.
release()
選択解除
disable()
Jcropを無効にします.説明:既存の選択ボックスはクリアされません.
enable()
Jcropの有効化
destroy()
Jcropの削除
tellSelect()
選択ボックスの値(実際のサイズ)を取得します.例:console.log(jcrop_api.tellSelect())
tellScaled()
選択ボックスの値(インタフェースサイズ)を取得します.例:console.log(jcrop_api.tellScaled())
getBounds()
画像の実際のサイズを取得します.フォーマットは[w,h]です.
getWidgetSize()
画像表示サイズを取得し、[w,h]のフォーマット
getScaleFactor()
画像のスケールを取得します.フォーマットは[w,h]です.
バージョンおよびDemo
optionsパラメータの説明(オプション)
パラメータ名
デフォルト
パラメータの説明
allowSelect
true
新規選択を許可
allowMove
true
選択範囲の移動を許可
allowResize
true
選択範囲のズームを許可
trackDocument
true
baseClass
"jcrop"
ベーススタイル名の接頭辞.説明:class=「jcrop-holder」で、変更されたのはその中のjcropだけです.
addClass
null
スタイルを追加します.class名が「test」であると仮定すると、スタイルを追加するとclass=「test jcrop-holder」になります.
bgColor
"black"
背景色.色キー、HEX、RGBどちらでも構いません.
bgOpacity
0.6
背景の透明度
bgFade
false
バックグラウンド遷移効果を使用するかどうか
borderOpacity
0.4
選択した枠線の透明度
handleOpacity
0.5
ズームボタンの透明度
handleSize
9
ズームボタンのサイズ
handleOffset
5
ズームボタンと枠線の距離
aspectRatio
0
ボックス幅の高さ比を選択します.説明:width/height
keySupport
true
キーボードコントロールをサポートします.キーリスト:上下左右(移動)、Esc(キャンセル)、Tab(裁断枠から飛び出して次へ)
cornerHandles
true
コーナーズームを許可
sideHandles
true
四辺ズームを許可
drawBorders
true
枠線の描画
dragEdges
true
外枠のドラッグを許可
fixedSupport
true
touchSupport
null
boxWidth
0
キャンバスの幅
boxHeight
0
キャンバスの高さ
boundary
2
境界.説明:境界からマウスをドラッグしてトリミング領域を選択できます.
fadeTime
400
過剰効果の時間
animationDelay
20
アニメーションの遅延
swingSpeed
3
かとそくど
minSelect
[0,0]
ボックスの最小選択サイズ.説明:選択ボックスがサイズより小さい場合は、自動的に選択解除されます.
maxSize
[0,0]
選択ボックスの最大サイズ
minSize
[0,0]
ボックスの最小サイズ
onChange
function(){}
ボックス変更時のイベント
onSelect
function(){}
セレクトボックスタイミングのイベント
onRelease
function(){}
選択解除時のイベント
使用方法
CSSファイルの読み込み
<link rel="stylesheet" href="css/jquery.Jcrop.css">JavaScriptファイルの読み込み
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script> 画像タグにIDを付ける
<img id="element_id" src="pic.jpg">Jcropを呼び出す
$("#element_id").Jcrop();APIメソッドの説明
方法
方法の使用説明
setImage(string)
画像を設定(または変更)します.例:jcrop_api.setImage("newpic.jpg")
setOptions(object)
初期化設定パラメータと同じフォーマットのパラメータを設定(または変更)
setSelect(array)
[x,y,x 2,y 2]のパラメータ形式で選択ボックスを作成します.
animateTo(array)
アニメーション効果で選択ボックスを作成します.パラメータのフォーマットは[x,y,x 2,y 2]です.
release()
選択解除
disable()
Jcropを無効にします.説明:既存の選択ボックスはクリアされません.
enable()
Jcropの有効化
destroy()
Jcropの削除
tellSelect()
選択ボックスの値(実際のサイズ)を取得します.例:console.log(jcrop_api.tellSelect())
tellScaled()
選択ボックスの値(インタフェースサイズ)を取得します.例:console.log(jcrop_api.tellScaled())
getBounds()
画像の実際のサイズを取得します.フォーマットは[w,h]です.
getWidgetSize()
画像表示サイズを取得し、[w,h]のフォーマット
getScaleFactor()
画像のスケールを取得します.フォーマットは[w,h]です.