jquery.iocurve

TONE CURVE UI COMPONENT

はじめに

jQuery プラグイン jquery.iocurve のページへようこそ。

これはPhotoshopやGIMPなど画像加工ソフトによくある「トーンカーブ」のようなGUI部品です。

曲線に沿った、指定範囲の数値列を生成します。

以下は 0 ～ 255 の整数を生成する例です。制御点をマウスでつかんで動かしてみてください。

必要条件

確認ブラウザ

使い方

<div class="iocurve" style="width:300px"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cmiz/jquery.iocurve@0.0.6/dist/jquery.iocurve.min.js"></script>
<script>
var $curve = $('.iocurve');
var option = {
    // オプション
};
$curve.on('output', function(ev, data){
    // 出力データ
    console.log(data);
});
$curve.iocurve(option);
</script>

オプション

var option = {
    x: [0, 100],
    y: [0, 100]
};
var $curve = $('.iocurve').iocurve(option);
キー 既定値 説明 指定例
x 
[0, 255]
 X軸＝入力の数値範囲を指定します。 
x: [-1, 1],
y: [-100, 100],
dx: 0.01
y 
[0, 255]
 Y軸＝出力の数値範囲を指定します。
dx 
1
 入力値の分解幅を指定します。
既定値 1 は、入力範囲 0 ～ 255 を [ 0, 1, 2, 3 ... 254, 255 ] の 256 個に分解することを意味します。
入力値の個数はそのまま出力値の個数となります。
y0 
0
 Y軸の見た目上の正負の堺をどこに置くか数値で指定します。
curvature 
0.3
 曲率を 0 ～ 0.5 で指定します。0 は直線です。 
curvature: 0.1
className 
''
 全体を包む<div>要素のクラス名を指定します。 
className: 'iocurve'
css 
{
    position: 'relative',
    margin: '20px'
}
 全体を包む<div>要素のCSSを指定します。 
css: {
    margin: '0'
}
canvas 
{
    height: '100%',
    fillStyle: '#fff',
    css: {
        display: 'block',
        boxShadow: '0 0 3px #000'
    }
}
 キャンバス(<canvas>要素)の高さ、色、CSSを指定します。

高さは％か数値(px)で指定します。％は横幅に対する割合で、100%は正方形です。 
canvas: {
    height: 300,
    css: {
        boxShadow: 'none'
    }
}
grid 
{
    visible: true,
    strokeStyle: 'rgba(0, 0, 0, 0.2)'
}
 補助目盛線の表示ON/OFFと線の色を指定します。 
grid: { visible: false }
anchor 
{
    points: [ [0, 0], [255, 255] ],
    tagName: 'a',
    className: 'anchor',
    css: {
        position: 'absolute',
        display: 'block',
        width: 18,
        height: 18,
        borderRadius: '50%',
        border: '1px solid rgba(0, 0, 0, 0.5)',
        background: 'rgba(255, 255, 255, 0.5)',
        boxSizing: 'border-box',
        cursor: 'move',
        transform: 'translate(-50%, -50%)'
    }
}
 アンカー（制御点）の初期座標値 [X, Y] の配列と、アンカー要素のCSSを指定します。

アンカーの初期座標値は必ず先頭と末尾の2点以上をセットし、値はXY範囲内（既定の場合は0-255）とします。
また先頭と末尾のX座標を、X軸の範囲の下限と上限に一致させます。たとえばX座標が [0, 100] の場合、先頭アンカーX座標を 0 、末尾アンカーX座標を 100 とします。
 
anchor: {
    points: [
        [-1, -100],
        [0, 0],
        [1, 100]
    ]
}
bar 
{
    visible: true,
    fillStyle: {
        positive: 'rgba(0, 100, 70, 0.2)',
        negative: 'rgba(150, 30, 70, 0.2)'
    }
}
 出力値の棒グラフ
plot 
{
    visible: false,
    strokeStyle: '#f00'
}
 出力値の散布プロット
histogram 
{
    data: null,
    fillStyle: '#ddd'
}
 背景ヒストグラム

data にヒストグラム数値配列を指定します。配列要素数は出力値と同数、各数値は0～1の実数とします。
controlPoint 
{
    visible: false,
    strokeStyle: '#00f'
}
 曲線補間の制御点と接線

イベント

name 説明 コード
anchors アンカーが作成・変更された時に発火します。全アンカー情報を取得します。
※コールバック引数 $anchors は読み取り専用です。編集しないでください。 
$curve.on('anchors', function( ev, $anchors ){
    // $anchors is jQuery object of all anchor elements.
    // Caution: Do not modify $anchors. It is read-only. Because it is a managed object inside the plugin.
    $anchors.each(function() {
        // $(this) is one anchor.
    });
});
anchor アンカー入力が発生した時に発火します。入力中のアンカー1つの情報を取得します。 
$curve.on('anchor', function( ev, anchor ){
    // anchor.element   anchor DOM element
    // anchor.kind      'new'|'move'|'remove'
    // anchor.x         coordinate X
    // anchor.y         coordinate Y
});
output 出力値が更新された時に発火します。 
$curve.on('output', function( ev, data ){
    // data is array of output values.
});

メソッド

name 説明 コード
data 出力値を取得します。 
$curve.trigger('data', [function( data ){
    // data
}]);
option オプションを変更します。
ただしアンカー初期座標は変更できません。 
$curve.trigger('option', [{
    // 任意のオプション
    // ただし anchor.points は変更不可
}]);
resized 親要素に合わせてリサイズします。 
$curve.trigger('resized');
destroy 破棄します。 
$curve.trigger('destroy');

応用例

  • 写真素材を加工します
  • 各ピクセルのRGB値をカーブの出力値に変換します
  • 出力範囲 -20 ～ 20
  • 出力値の散布プロット表示
  • 曲線補間の制御点と接線表示
  • 曲率をスライダーで変更

ダウンロード / ソースコード

ライセンス

Apache License 2.0