Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Isoline (gallery-isoline) on cdn

Last Updated: 06/28/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 06/16/12
Last CDN Push: 06/27/12
Build Tag: gallery-2012.06.27-20-10
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

Y.Isoline extends Y.Path with an implementation of the marching squares algorithm to draw an isoline for a two-dimensional scalar field.

More information about this topic can be found on Wikipedia:
http://en.wikipedia.org/wiki/Contour_line
http://en.wikipedia.org/wiki/Marching_squares

Y.Isoline has 8 attributes in addition to all of Y.Path's attributes.

dataMaxX
dataMaxY
dataMinX
dataMinY

These four attributes limit the two-dimensional region that will be drawn. If set to null, the entire height and width of the shape will be drawn. Rendering a smaller region improves performance.

dataCellHeight: The height of each 'square' used by the marching squares algorithm.
dataCellWidth: The width of each 'square' used by the marching squares algorithm.
dataCellSize: Setting dataCellSize will set dataCellHeight and dataCellWidth to the same value. It is just here as a convenience for setting the size of a square cell.

Making the cells smaller means that there will be more cells within the two-dimensional region. Having more cells usually improves the quality of the rendering, but takes longer.

dataFn: Required. This function defines a two-dimensional scalar field and the threshold at which the isoline is drawn. This function will be passed x and y as arguments. This function should return either true or false.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.27-20-10'
}).use('gallery-isoline', function(Y) {
    var graphic = new Y.Graphic({
            render: '#myNode'
        }),
        isoline = graphic.addShape({
            dataFn: function (x, y) {
                return Math.sqrt((x - 15) * (x - 15) + (y - 15) * (y - 15)) < 12 || Math.sqrt((x - 35) * (x - 35) + (y - 35) * (y - 35)) < 12;
            },
            height: 100,
            type: Y.Isoline,
            width: 100,
            x: 0,
            y: 0
        });
});