| 1 | {% extends "basex.html" %} |
| 2 | {% load markup %} |
| 3 | {% block pageid %}code{% endblock %} |
| 4 | {% block headers %} |
| 5 | <link href="doc.css" media="screen" rel="stylesheet" type="text/css" /> |
| 6 | {% endblock %} |
| 7 | {% block title %}PlotKit.Canvas{% endblock %} |
| 8 | |
| 9 | {% block content %} |
| 10 | <div class="page doc api"> |
| 11 | {% filter markdown %} |
| 12 | [PlotKit Home](PlotKit.html) | [<<](PlotKit.Renderer.html) | [>>](PlotKit.SVG.html) |
| 13 | |
| 14 | PlotKit Canvas |
| 15 | ============== |
| 16 | |
| 17 | This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit. |
| 18 | |
| 19 | It supports Safari 2, Firefox 1.5, Opera 9 and IE 6. Note that for IE6 |
| 20 | support, you will need iecanvas.htc which is included with PlotKit. |
| 21 | |
| 22 | Please see the [Canvas/SVG Browser Support Status][Browser] for bugs |
| 23 | with the Canvas implementation on different browsers. |
| 24 | |
| 25 | PlotKit Canvas Extra Options |
| 26 | ---------------------------- |
| 27 | |
| 28 | In addition to the options outlined in [PlotKit.Renderer][], here are additional options that the CanvasRenderer supports. |
| 29 | |
| 30 | <table> |
| 31 | <thead> |
| 32 | <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr> |
| 33 | </thead> |
| 34 | <tbody> |
| 35 | <tr> |
| 36 | <th>IECanvasHTC</th> |
| 37 | <td>Path relative to the HTML document of the iecanvas.htc file.</td> |
| 38 | <td>string</td> |
| 39 | <td>iecanvas.htc</td> |
| 40 | </tr> |
| 41 | </tbody> |
| 42 | </table> |
| 43 | |
| 44 | PlotKit Canvas Example |
| 45 | ---------------------- |
| 46 | |
| 47 | var options = { |
| 48 | "drawsBackground": true, |
| 49 | "drawYAxis": false, |
| 50 | "IECanvasHTC": "contrib/iecanvas.htc" |
| 51 | }; |
| 52 | |
| 53 | var layout = new Layout("bar", {}); |
| 54 | layout.addDataset("squares", [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]); |
| 55 | layout.evaluate() |
| 56 | var renderer = new CanvasRenderer($('canvas'), layout, options); |
| 57 | layout.render(); |
| 58 | |
| 59 | PlotKit Canvas Events/Signals |
| 60 | ----------------------------- |
| 61 | |
| 62 | There is preliminary support for events in the CanvasRenderer. If ``enableEvents`` is set ``true`` in the options, you can hook into the ``onmousemove``, ``onclick``, ``onmouseover`` and ``onmouseout`` events via the MochiKit.Signal.connect. Note that you must have included MochiKit/Signal.js before instantiating the CanvasRenderer |
| 63 | |
| 64 | PlotKit Canvas Notes |
| 65 | -------------------- |
| 66 | |
| 67 | ### IE Support |
| 68 | |
| 69 | IE Support is done thanks to webfx's great iecanvas.htc which emulates |
| 70 | part of the WHATWG canvas specification. Note that alpha values and |
| 71 | clear() does not work in IE. |
| 72 | |
| 73 | Remember that iecanvas.htc __must__ reside on the same domain as the |
| 74 | HTML page itself. |
| 75 | |
| 76 | [PlotKit.Renderer]: PlotKit.Renderer.html |
| 77 | [Browser]: SVGCanvasCompat.html |
| 78 | |
| 79 | {% endfilter %} |
| 80 | </div> |
| 81 | {% endblock %} |