iocurve is a fully configurable jQuery plugin to create a Tone Curve user interface inspired by Photoshop and Lightroom where you can adjust points across a specific value range by dragging your mouse.
This is a GUI component like the “tone curve” often found in image processing programs such as Photoshop and GIMP.
How to make use of it:
1. Create a container to carry the Tone Curve UI.
<div class="iocurve"></div>
2. Download the zip and cargo the minified model of the iocurve plugin after loading the jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/jquery.iocurve.min.js"></script>
3. Call the perform on the container factor to generate a fundamental Tone Curve UI.
$(function(){ $('.iocurve').iocurve(); });
4. Customize the Tone Curve UI. All attainable default choices:
$('.iocurve').iocurve({ // input/output value range x: [0, 255], y: [0, 255], // decomposition width dx: 1, // Y axis y0: 0, // curvature curvature: 0.3, // height height: '100%', // CSS class className: '', // CSS styles css: position: 'relative', margin: '20px' , // canvas styles canvas: { css: display: 'block', boxShadow: '0 0 3px #000' , fillStyle: '#fff' }, // grid options grid: { strokeStyle: 'rgba(0, 0, 0, 0.2)' }, // anchor options anchor: { points: [ [0, 0], [255, 255] ], tagName: 'a', className: 'anchor', css: position: 'absolute', display: 'block', width: 18, height: 18, borderRadius: '50%', // border: '4px solid rgba(0, 64, 255, 0.5)', border: '1px solid rgba(0, 0, 0, 0.5)', background: '#fff', boxSizing: 'border-box', cursor: 'move', transform: 'translate(-50%, -50%)' }, // bar styles bar: { visible: true, fillStyle: positive: 'rgba(0, 100, 70, 0.2)', negative: 'rgba(150, 30, 70, 0.2)' }, // plot diagram styles plot: visible: false, strokeStyle: '#f00' , // histogram styles histogram: , // connection line styles controlPoint: visible: false, strokeStyle: '#00f' });
Create A Tone Curve UI Component, jquery.iocurve Plugin/Github
See Demo And Download
Official Website(cmiz): Click Here
This superior jQuery/javascript plugin is developed by cmiz. For extra Advanced Usages, please go to the official website.
Be First to Comment