slolwind / fxcanvas Goto Github PK
View Code? Open in Web Editor NEWAutomatically exported from code.google.com/p/fxcanvas
fxcanvas's Introduction
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="docs/css/active4d.css">
<link type="text/css" rel="stylesheet" href="docs/css/main.css">
<title>fxCanvas - HTML5 Canvas for Internet Explorer and other browsers</title>
</head>
<body>
<a href="http://code.google.com/p/fxcanvas/"><img src="docs/images/fxcanvas.png" /></a>
<h2>Intro <a class='hh' name='Intro'>⁋</a></h2><p>fxCanvas is an implementation of the HTML5 Canvas element for Internet Explorer (two-dimensional graphics only). <h2>Requirements <a class='hh' name='Requirements'>⁋</a></h2></p><ul><li>Flash player 9+ on Internet Explorer (some versions from 10.1 branch does not work properly, see <a href="http://code.google.com/p/fxcanvas/issues/detail?id=5">Issue 5</a>)</li><li>Internet Explorer 5.5+ (IE9 not supported at this moment)</li></ul>
<h2>Contents <a class='hh' name='Contents'>⁋</a></h2><ul><li><a href="#Usage">Usage</a></li><li><a href="#Compatibility">Compatibility</a></li><li><a href="#Extended_features">Extended features</a></li><li><a href="#Known_bugs">Known bugs</a></li><li><a href="#Demos_and_examples">Demos and examples</a></li><li><a href="#Applications">Applications</a></li><li><a href="#Download_and_source">Download and source</a></li><li><a href="#References">References</a></li><li><a href="#Related_projects">Related projects</a></li><li><a href="#Volunteers_wanted!_Couple_of_impossible_tasks_are_there_(TODO):">TODO</a></li><li><a href="#Bugs_and_feedbacks">Bugs and feedbacks</a></li><li><a href="#What's_up">News</a></li></ul>
<h2>Usage <a class='hh' name='Usage'>⁋</a></h2><p>Download <a href="http://code.google.com/p/fxcanvas/downloads/detail?name=fxcanvas-0.2(beta4)-supersonic.zip">package</a>, unzip it into a public directory on the server and then paste in head section of the page following tags:</p><pre class="active4d code-block">
<span class="TagContainer"><span class="TagContainer"><</span><span class="TagName">head</span><span class="TagContainer">></span></span>
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span> <span class="TagAttribute">src</span>=<span class="String"><span class="String">"</span>/public/path/jooscript.js<span class="String">"</span></span>></<span class="TagName">script</span>>
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span> <span class="TagAttribute">src</span>=<span class="String"><span class="String">"</span>/public/path/fxcanvas.js<span class="String">"</span></span>></<span class="TagName">script</span>>
<span class="BlockComment"><span class="BlockComment"><!--</span>[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]<span class="BlockComment">--></span></span>
<span class="TagContainer"><span class="TagContainer"><</span><span class="TagName">comment</span><span class="TagContainer">></span></span><span class="TagContainer"><span class="TagContainer"><</span><span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span> <span class="TagAttribute">src</span>=<span class="String"><span class="String">"</span>/public/path/canvas_backend.js<span class="String">"</span></span><span class="TagContainer">><span class="TagContainer"><</span>/</span><span class="TagName">script</span><span class="TagContainer">></span></span><span class="TagContainer"><span class="TagContainer"></</span><span class="TagName">comment</span><span class="TagContainer">></span></span>
<span class="TagContainer"><span class="TagContainer"></</span><span class="TagName">head</span><span class="TagContainer">></span></span>
</pre><p>If you are not familiar with Canvas API, it may be useful to read this: <ul> <li style="list-style-image:url(docs/images/moz.ico);"><a href="https://developer.mozilla.org/en/HTML/Canvas">Canvas tutorial on Mozzila.org</a></li> <li style="list-style-image:url(docs/images/opera.ico);"><a href="http://dev.opera.com/articles/view/html-5-canvas-the-basics/">... on dev.Opera.com</a></li> </ul></p><p><strong>New!</strong> Images and text are now <a href="http://burzak.com/proj/fxcanvas/tests/test_clip.html">clipable</a>.</p><p>fxCanvas also works properly with <code>data:</code> URIs in Internet Explorer. <a href="http://burzak.com/proj/fxcanvas/tests/image_data_example.html">Example</a>. <h2>Compatibility <a class='hh' name='Compatibility'>⁋</a></h2></p><p>fxCanvas supports almost all the Canvas features. The differences is in:</p><p><strong> Invoke command and chaining operations </strong></p><p>Context commands are keeping in a buffer before they will be applyed (IE only), so that to get values you have to use method <code>invoke()</code>:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">getElementById</span>(<span class="String"><span class="String">"</span>cv<span class="String">"</span></span>);
<span class="Storage">var</span> ctx <span class="Operator">=</span> cv.getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>);
ctx.setFillStyle(<span class="String"><span class="String">"</span>#ff0<span class="String">"</span></span>)
.setStrokeStyle(<span class="String"><span class="String">"</span>#0ff<span class="String">"</span></span>)
.strokeRect(<span class="Number">10</span>, <span class="Number">20</span>, <span class="Number">30</span>, <span class="Number">30</span>)
.fillRect(<span class="Number">30</span>, <span class="Number">40</span>, <span class="Number">50</span>, <span class="Number">50</span>)
.invoke(<span class="String"><span class="String">"</span>getImageData<span class="String">"</span></span>, <span class="Number">0</span>, <span class="Number">0</span>, cv.<span class="NamedConstant">width</span>, cv.<span class="NamedConstant">height</span>, <span class="Storage">function</span> (<span class="FunctionArgument">imageData</span>) {
<span class="LineComment"><span class="LineComment">//</span> ... processing image data</span>
});
</<span class="TagName">script</span>>
</pre>
<strong> Images </strong><p>Prior to using images you have to preload them:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">getElementById</span>(<span class="String"><span class="String">"</span>cv<span class="String">"</span></span>);
<span class="Storage">var</span> ctx <span class="Operator">=</span> cv.getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>);
<span class="Storage">var</span> image_src <span class="Operator">=</span> <span class="String"><span class="String">"</span>sample.jpg<span class="String">"</span></span>;
<span class="LibraryClassType">cv</span>.<span class="FunctionName">onload</span> = <span class="Storage">function</span>(<span class="FunctionArgument">img</span>) {
<span class="Keyword">if</span> (img.<span class="NamedConstant">src</span>.<span class="CommandMethod">indexOf</span>(image_src) <span class="Operator">></span> <span class="Operator">-</span><span class="Number">1</span>) {
ctx.drawImage(img, <span class="Number">10</span>, <span class="Number">10</span>);
}
}
cv.loadImages(image_src <span class="BlockComment"><span class="BlockComment">/*</span> ... img1, img2, ... imgX <span class="BlockComment">*/</span></span>);
</<span class="TagName">script</span>>
</pre>
<strong> Image data array </strong><p>We cannot use canvas image data as it declared in specs, because of IE using extremely ineffective memory manager so it may eats all available memory in some circumstances. So that fxCanvas is using slightly different image data format. </p><p>Take a look at example:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">getElementById</span>(<span class="String"><span class="String">"</span>cv<span class="String">"</span></span>);
<span class="Storage">var</span> ctx <span class="Operator">=</span> cv.getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>);
ctx.invoke(<span class="String"><span class="String">"</span>getImageData<span class="String">"</span></span>, <span class="Number">0</span>, <span class="Number">0</span>, cv.<span class="NamedConstant">width</span>, cv.<span class="NamedConstant">height</span>, <span class="Storage">function</span>(buf) {
<span class="Keyword">for</span> (<span class="Storage">var</span> i <span class="Operator">=</span> <span class="Number">0</span>; i <span class="Operator"><</span> cv.<span class="NamedConstant">width</span><span class="Operator">*</span>cv.<span class="NamedConstant">width</span>; i<span class="Operator">++</span>) {
<span class="Storage">var</span> pixelValue <span class="Operator">=</span> buf.<span class="NamedConstant">data</span>[i], <span class="LineComment"><span class="LineComment">//</span> pixel value is 32-bit integer</span>
red <span class="Operator">=</span> pixelValue <span class="Operator">></span><span class="Operator">></span> <span class="Number">24</span> <span class="Operator">&</span> <span class="Number">0xFF</span>,
green <span class="Operator">=</span> pixelValue <span class="Operator">></span><span class="Operator">></span> <span class="Number">16</span> <span class="Operator">&</span> <span class="Number">0xFF</span>,
blue <span class="Operator">=</span> pixelValue <span class="Operator">></span><span class="Operator">></span> <span class="Number">8</span> <span class="Operator">&</span> <span class="Number">0xFF</span>,
alpha <span class="Operator">=</span> pixelValue <span class="Operator">&</span> <span class="Number">0xFF</span>;
<span class="LineComment"><span class="LineComment">//</span> </span>
<span class="LineComment"><span class="LineComment">//</span> exchange color channels</span>
buf.<span class="NamedConstant">data</span>[ofs] <span class="Operator">=</span> (blue <span class="Operator"><</span><span class="Operator"><</span> <span class="Number">24</span>) <span class="Operator">+</span> (red <span class="Operator"><</span><span class="Operator"><</span> <span class="Number">16</span>) <span class="Operator">+</span> (green <span class="Operator"><</span><span class="Operator"><</span> <span class="Number">8</span>) <span class="Operator">+</span> alpha;
}
ctx.invoke(<span class="String"><span class="String">"</span>putImageData<span class="String">"</span></span>, buf, <span class="Number">0</span>, <span class="Number">0</span>, <span class="Storage">function</span>(){
<span class="LineComment"><span class="LineComment">//</span> ... print out the buffer after the operation will be completed</span>
<span class="TypeName">console</span><span class="CommandMethod">.log</span>(<span class="String"><span class="String">"</span>Image data dump:<span class="String">"</span></span> <span class="Operator">+</span> buf);
}
});
</<span class="TagName">script</span>>
</pre><p>Further explanation can be founded <a href="http://burzak.com/proj/fxcanvas/tests/data-structure-comparison.html">here</a>.</p><p><strong> isPointInPath() </strong></p><p><code>isPointInPath()</code> in Internet Explorer returns <code>true</code> if point in bounding box of the path. To get accurate results, use <code>ctx.invoke("isPointInPath", x, y, ...)</code>.</p><p><strong> toDataURL() </strong></p><p>To get canvas shot you have to call the function with data handler:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">getElementById</span>(<span class="String"><span class="String">"</span>cv<span class="String">"</span></span>);
<span class="Storage">var</span> type <span class="Operator">=</span> <span class="String"><span class="String">"</span>image/jpeg<span class="String">"</span></span>, quality <span class="Operator">=</span> .<span class="Number">4</span>; <span class="LineComment"><span class="LineComment">//</span> quality is optional argument</span>
cv.toDataURL(type, quality, <span class="Storage">function</span> (<span class="FunctionArgument">png_data</span>) {
<span class="LineComment"><span class="LineComment">//</span> draw slice of the canvas on the same canvas at top right corner</span>
<span class="Storage">var</span> ctx <span class="Operator">=</span> <span class="Variable">this</span>.getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>);
<span class="LibraryClassType">this</span>.<span class="FunctionName">onload</span> = <span class="Storage">function</span> (<span class="FunctionArgument">img</span>) {
ctx.drawImage(img, <span class="Number">0</span>, <span class="Number">0</span>, cv.<span class="NamedConstant">width</span> <span class="Operator">-</span> <span class="Number">100</span>, <span class="Number">0</span>, <span class="Number">100</span>, <span class="Number">100</span>);
}
<span class="Variable">this</span>.loadImages(png_data);
});
</<span class="TagName">script</span>>
</pre><p>Possible types: <code>image/png</code>, <code>image/jpeg</code>, <strike><code>image/svg+xml</code></strike>.</p><p><strong> How-to create Canvas element in script </strong></p><p>The simpliest way to dynamically create canvas element is:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">createElement</span>(<span class="String"><span class="String">"</span>canvas<span class="String">"</span></span>);
cv.<span class="NamedConstant">width</span> <span class="Operator">=</span> <span class="Number">200</span>;
cv.<span class="NamedConstant">height</span> <span class="Operator">=</span> <span class="Number">100</span>;
<span class="LibraryClassType">document</span>.<span class="NamedConstant">body</span>.<span class="CommandMethod">appendChild</span>(cv);
<span class="LineComment"><span class="LineComment">//</span> ...</span>
</<span class="TagName">script</span>>
</pre><p>Note that if fxCanvas lib is loaded then in newly created elements will be using extended context by default. To disable this behavior and manually initialize extended context, use following code:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Operator">$</span>Import(<span class="String"><span class="String">"</span>buz.fxcanvas<span class="String">"</span></span>);
<span class="LineComment"><span class="LineComment">//</span> don't forget to disable fxCanvas before page content will loaded</span>
fxcanvas.config.enable <span class="Operator">=</span> <span class="BuiltInConstant">false</span>;
<span class="LibraryClassType">window</span>.<span class="FunctionName">onload</span> = <span class="Storage">function</span>(){
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">createElement</span>(<span class="String"><span class="String">"</span>canvas<span class="String">"</span></span>);
fxcanvas.initElement(cv)
<span class="LineComment"><span class="LineComment">//</span> ...</span>
}
</<span class="TagName">script</span>>
</pre><p><strong> Context and Backend </strong></p><p>There are a few two-dimensional Canvas contexts: first is extended context <code>canvas.getContext("2d")</code>, second is original context <code>canvas.getBackend("2d")</code>. Use last one if you want native drawing speed.</p><p><strong> Composite operations </strong></p><p>Only <code>source-over</code> and <code>lighter</code> are supported.</p><p><strong> Handling canvas resize event </strong></p><p>There is a specific problem with canvas resizing due to asynchronous nature. You cannot draw graphics right after the canvas was resizing or it will be clear. As a solution I've added <code>oncanvasresize</code> event which is fired when canvas will be ready after resize. Note that <code>oncanvasresize</code> will not be triggered if the dimensions is the same or is changed style property.</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
ctx.canvas.<span class="NamedConstant">width</span> <span class="Operator">=</span> <span class="Number">400</span>
ctx.canvas.<span class="NamedConstant">height</span> <span class="Operator">=</span> <span class="Number">300</span>
<span class="LibraryClassType">ctx</span>.<span class="FunctionName">oncanvasresize</span> = <span class="Storage">function</span>(){
ctx.beginPath();
ctx.arc(<span class="Number">75</span>,<span class="Number">75</span>,<span class="Number">50</span>,<span class="Number">0</span>,<span class="LibraryClassType">Math</span>.<span class="NamedConstant">PI</span><span class="Operator">*</span><span class="Number">2</span>,<span class="BuiltInConstant">true</span>);
ctx.stroke()
}
</<span class="TagName">script</span>>
</pre><p><strong> Text API </strong></p><p><!-- Текст АПИ - это самая кастрированная часть. Во-первых, трансформированный текст выглядит "покорябанным", во-вторых не поддерживается метод strokeText(). Зато measureText() возвращает значения width, height, ascent и descent (только там, где используется флеш). --></p><p>Text API is the most weak part. First is that transformed text looks awkward. Second is not supported method <code>strokeText()</code>. But <code>measureText()</code> returns even four values: width, height, ascent and descent (only for flash backend).</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
ctx.font <span class="Operator">=</span> <span class="String"><span class="String">"</span>35px Arial<span class="String">"</span></span>
ctx.invoke(<span class="String"><span class="String">"</span>measureText<span class="String">"</span></span>, <span class="String"><span class="String">"</span>abc<span class="String">"</span></span>, <span class="Storage">function</span>(dim){
trace(dim.<span class="NamedConstant">width</span>, dim.<span class="NamedConstant">height</span>, dim.ascent, dim.descent)
})
</<span class="TagName">script</span>>
</pre><p>The things may change when I add a brand new text renderer. <h2>Extended features <a class='hh' name='Extended_features'>⁋</a></h2></p><p>Extended context (global <code>extCanvasRenderingContext2D</code>) provides some new useful features for developers . </p><p><strong> Animation </strong></p><p>There are two ways to making animation on Canvas. First case is using <code>setInterval()</code>, second case is using <code>oncanvasframe</code> event:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> ctx <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">getElementById</span>(<span class="String"><span class="String">"</span>cv<span class="String">"</span></span>).getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>);
<span class="BlockComment"><span class="BlockComment">/*</span></span>
<span class="BlockComment"> * variant one</span>
<span class="BlockComment"> <span class="BlockComment">*/</span></span>
<span class="CommandMethod">setInterval</span>(<span class="Storage">function</span>() {
<span class="LineComment"><span class="LineComment">//</span> ... draw frame here</span>
}, <span class="Number">1000</span>);
<span class="BlockComment"><span class="BlockComment">/*</span></span>
<span class="BlockComment"> * variant two</span>
<span class="BlockComment"> <span class="BlockComment">*/</span></span>
ctx.canvas.frameDuration <span class="Operator">=</span> <span class="Number">10</span>; <span class="LineComment"><span class="LineComment">//</span> in microseconds</span>
<span class="LibraryClassType">ctx.canvas</span>.<span class="FunctionName">oncanvasframe</span> = <span class="Storage">function</span>(){ <span class="LineComment"><span class="LineComment">//</span> frame event handler will fired with interval in 10ms</span>
<span class="LineComment"><span class="LineComment">//</span> ... draw frame here</span>
};
<span class="LineComment"><span class="LineComment">//</span> Warning: animations with complex graphics and tiny frameDuration value may hang on the browser!</span>
</<span class="TagName">script</span>>
</pre><p>Using <code>oncanvasframe</code> event is strongly encouraged, as in Internet Explorer animation running on <code>setInterval()</code> will show incorrect frame rate. Besides in modern browsers (e.g. Firefox 4) animation will be play smoother on frame event (technically: synced with display refresh frame rate).</p><p>Note: <code>oncanvasframe</code> event is non-standard extension.</p><p>Default <code>frameDuration</code> is 100ms.</p><p><strong> Canvas Path </strong></p><p><!-- Начиная с версии 0.2 в fxCanvas предложен новый экспериментальный метод рисования сложных кривых. Для этого добавлен специальный интерфейс CanvasPath, который позволяет разработчику создавать список из сегментов, а затем применять его в контексте холста. Это позволяет быстро рисовать даже очень сложные кривые за счет кеширования. Кеширование используется только в IE, так что в остальных браузерах использование CanvasPath не даст выиграша в производительности. --></p><p>Starting from version 0.2 is introduced a new experimental method for drawing complex curves. For that was added special interface <code>CanvasPath</code>, which allow developers to create array of path segments. It make fast drawings in IE even with complicated curves thanks to caching algorithm. In other browsers using <code>CanvasPath</code> will not give performance gain. To use this feature set <code>ctx._useCanvasPath</code> or <code>fxcanvas.config.useCanvasPath</code> as <code>true</code>. By default <code>useCanvasPath</code> is <code>false</code>.</p><p>A very generic example:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Storage">var</span> cv <span class="Operator">=</span> <span class="LibraryClassType">document</span>.<span class="CommandMethod">createElement</span>(<span class="String"><span class="String">"</span>canvas<span class="String">"</span></span>);
<span class="Storage">var</span> ctx <span class="Operator">=</span> cv.getContext(<span class="String"><span class="String">"</span>2d<span class="String">"</span></span>)
<span class="Storage">var</span> longPath <span class="Operator">=</span> ctx.createPath()
longPath.<span class="CommandMethod">moveTo</span>(<span class="Number">0</span>, <span class="Number">0</span>)
<span class="Keyword">for</span>(<span class="Storage">var</span> i<span class="Operator">=</span><span class="Number">0</span>; i<span class="Operator"><</span><span class="Number">1000</span>; i<span class="Operator">++</span>) {
longPath.lineTo(i, i)
}
ctx.beginPath()
ctx.appendPath(longPath)
ctx.stroke()
ctx.rotate(<span class="Number">90</span><span class="Operator">*</span><span class="LibraryClassType">Math</span>.<span class="NamedConstant">PI</span>/<span class="Number">180</span>)
ctx.beginPath()
ctx.appendPath(longPath)
ctx.stroke()
</<span class="TagName">script</span>>
</pre><p><strong> Path bounds </strong></p><p>There are some new methods and properties: <ul><li>method <code>isPointInPathBounds(x, y) : boolean</code></li><li>method <code>getPathBounds() : Rectangle</code></li><li><code>transformMatrix</code> property</li></ul></p><p>Internally they are used as replacement for <code>isPointInPath</code> in IE. To use these methods in another browsers other than IE, set <code>ctx._tracePathBounds</code> or <code>fxcanvas.config.tracePathBounds</code> property as <code>true</code>. By default <code>tracePathBounds</code> is <code>true</code> for IE and <code>false</code> for others. </p><p>These methods are available even if the flash is disabled.</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
ctx.beginPath()
ctx.rect(<span class="Number">100</span>, <span class="Number">100</span>, <span class="Number">50</span>, <span class="Number">50</span>)
<span class="Storage">var</span> bounds <span class="Operator">=</span> ctx.getPathBounds()
trace(bounds.<span class="NamedConstant">x</span>, bounds.<span class="NamedConstant">y</span>, bounds.<span class="NamedConstant">width</span>, bounds.<span class="NamedConstant">height</span>)
<span class="LineComment"><span class="LineComment">//</span> will output 100 100 50 50</span>
</<span class="TagName">script</span>>
</pre><p><strong> Basic geometry </strong></p><p><!-- ДжуСкрипт предоставляет некоторые базовые геометрические примитивы, такие как Точка, Треугольних, Матрица2р которые можно использовать с методами расширенного контекста. </p><p>Например --></p><p> JooScript provides some basic geometry primitives such as Point, Rectangle and Matrix2d. They can be used within extended context:</p><pre class="active4d code-block">
<<span class="TagName">script</span> <span class="TagAttribute">type</span>=<span class="String"><span class="String">"</span>text/javascript<span class="String">"</span></span>>
<span class="Operator">$</span>Import(<span class="String"><span class="String">"</span>geom.*<span class="String">"</span></span>)
<span class="Storage">var</span> p0 <span class="Operator">=</span> <span class="Operator">new</span> <span class="TypeName">Point</span>(<span class="Number">10</span>,<span class="Number">10</span>)
<span class="Storage">var</span> p1 <span class="Operator">=</span> <span class="Operator">new</span> <span class="TypeName">Point</span>(<span class="Number">100</span>,<span class="Number">100</span>)
<span class="Storage">var</span> rect <span class="Operator">=</span> <span class="Operator">new</span> <span class="TypeName">Rectangle</span>(<span class="Number">20</span>,<span class="Number">10</span>,<span class="Number">300</span>,<span class="Number">300</span>)
<span class="Storage">var</span> pointer <span class="Operator">=</span> {x: <span class="Number">123</span>, y: <span class="Number">45</span>}
ctx.beginPath()
ctx.<span class="CommandMethod">moveTo</span>(p0)
ctx.vectorTo(p1)
ctx.rect(rect)
ctx.stroke()
<span class="Keyword">if</span>( ctx.isPointInPath(pointer) ) {
<span class="LineComment"><span class="LineComment">//</span> ...</span>
}
</<span class="TagName">script</span>>
</pre><p>Extended context also has <code>transformMatrix</code> property which is a 3x2 transformation matrix. It is available only if <code>tracePathBounds</code> is on.</p><p>For futher info refer to <a href="http://burzak.com/proj/jooscript-basics/">JooScript docs</a>. <h2>Known bugs <a class='hh' name='Known_bugs'>⁋</a></h2></p><ul><li>Sometime if user switching from Internet Explorer window to another desktop window, canvas element have lost focus, after that mouse events will not be triggered. He must click somewhere on a page (not on the canvas element!) to restore events. Workaround for this bug seems to be either impossible or very hard to code.</li><li>Dynamic canvas resize may not working properly with <code>setInterval</code>. Use <code>oncanvasresize</code> event as workaround. <a href="http://burzak.com/proj/fxcanvas/tests/explorercanvas.googlecode.com/examples/example3.html">Here is</a> an example.</li><li>In IE canvas element will be disabled if HTML page is loaded from local filesystem.</li></ul>
<h2>Demos and examples <a class='hh' name='Demos_and_examples'>⁋</a></h2><ul><li><a href="http://burzak.com/proj/fxcanvas/tests/drawarea.html">Drawarea</a></li><li><a href="http://burzak.com/proj/fxcanvas/demo/colorize.html">Colorize image</a></li><li><a href="http://burzak.com/proj/fxcanvas/tests/image_data_example.html">Example of using image data</a></li><li><a href="http://burzak.com/proj/fxcanvas/demo/plasma.html">Interferoplasma</a></li><li><a href="http://burzak.com/proj/fxcanvas/demo/watercolor.html">Watercolor</a></li><li><a href="http://burzak.com/proj/fxcanvas/demo/index.html">all demos</a>...</li><li><a href="http://burzak.com/proj/fxcanvas/tests/index.html">all tests and examples</a>...</li></ul><p><!-- <ul><li><a href="http://burzak.com/proj/fxcanvas/demo/cakejs/examples/canvas.html">CAKE</a></li></ul> --> <h2>Applications <a class='hh' name='Applications'>⁋</a></h2></p><ul><li><a href="http://burzak.com/proj/drawform/">DrawForm</a> is a graphical input form for web-pages</li></ul>
<h2>Download and source <a class='hh' name='Download_and_source'>⁋</a></h2><p><a href="http://code.google.com/p/fxcanvas/downloads/detail?name=fxcanvas-0.2(beta4)-supersonic.zip">Download zip</a> or <a href="http://code.google.com/p/fxcanvas/source/checkout">grab fresh trunk from SVN repo</a>. <h2>References <a class='hh' name='References'>⁋</a></h2></p><ul><li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">WHATWG Canvas spec</a>.</li><li>fxCanvas is a fork of <a href="http://code.google.com/p/flashcanvas/">flashcanvas</a>.</li><li><a href="http://flashcanvas.net">FlashCanvas Pro</a> offers commercial support.</li></ul>
<h2>Related projects <a class='hh' name='Related_projects'>⁋</a></h2><ul><li><a href="http://code.google.com/p/web-forkers/">Web Forkers</a>, is a <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a> fake for IE and other browsers.</li><li><a href="http://burzak.com/proj/jooscript-basics/">JooScript basics</a> is a JavaScript library used for building complex web-apps.</li><li><a href="http://code.google.com/p/svgweb/">SVG Web</a>, is a JS lib which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari.</li></ul>
<h2>Volunteers wanted! Couple of impossible tasks are there (TODO): <a class='hh' name='Volunteers_wanted!_Couple_of_impossible_tasks_are_there_(TODO):'>⁋</a></h2><ul><li><strike>rewrite Cubic Bezier Curves approximation algorithm;</strike></li><li><strike>rewrite arc drawing algorithm (see <a href="http://burzak.com/proj/fxcanvas/tests/canvas-rounded-corners.html">this bug</a>);</strike></li><li><strike>stroke to path conversion (=> patterns on strokes, strokeText() etc..) - seems to be impossible, required a new low level rendering system</strike> ;</li><li><strike>fix <code>isPointInPath()</code></strike>;</li><li>improve text API;</li><li>improve drawImage: <strike><code>drawImage(canvasElement, ...)</code></strike>, <code>drawImage(videoElement, ...)</code>;</li><li>translation from Canvas to SVG and vice versa, <code>toDataURL("image/xml+svg")</code>;</li><li>composite operations;</li><li>shadows;</li></ul>
<h2>Bugs and feedbacks <a class='hh' name='Bugs_and_feedbacks'>⁋</a></h2>
<ul><li><a href="http://code.google.com/p/fxcanvas/issues/list">Issue tracker</a></li><li><a href="http://groups.google.com/group/fxcanvas">Discussion group</a></li></ul><h2>What's up <a class='hh' name='What's_up'>⁋</a></h2><h3>fxCanvas 0.2 - Super Sonic <a class='hh' name='fxCanvas_0.2_-_Super_Sonic'>⁋</a></h3><p>
<img src="docs/images/super_sonic.gif" />
</p><p> <strong>Beta 4 (2011-02-05)</strong></p><p> It seems basic Canvas API is implemented. I wonder is it ready for production?</p><ul><li><code>jooscript.js</code> is updated to the latest beta with bright shiny new features.</li><li><code>oncanvasframe</code> now based on new approach from Mozzila: <code>mozRequestAnimationFrame</code> which gives pretty smooth playback for animations and games. Great introduction to <code>mozRequestAnimationFrame</code> <a href="http://nokarma.org/2010/02/02/javascript-game-development-the-game-loop/">is here</a>.</li><li>Added demo <a href="http://burzak.com/proj/fxcanvas/demo/watercolor.html">Watercolor</a>.</li><li>(IE) Method <code>canvas.loadImage</code> renamed to <code>loadImages</code> as it handle multiple arguments.</li><li>(IE) Fixed my mistake in load queue.</li><li>(IE) <a href="http://www.timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm">Tangent approximation</a> was replaced with Fixed MidPoint approach. In most cases end-users will not see any differences between two approaches (bezier curve will be wrong on extremal arguments only), but Fixed MidPoint algorithm will works a lot faster especially with complex graphic with tons of cubic bezier curves.</li><li>(IE) In the same time was refactored arcs drawing method. And it became faster too.</li><li>(IE) Now unexpected arguments will <a href="http://burzak.com/proj/fxcanvas/tests/test_exceptions.html">raise an exception</a>.</li><li>(IE) Now URLs with ports are supported (<a href="http://code.google.com/p/fxcanvas/issues/detail?id=6">issue 6</a>).</li><li>(IE) Implemented accurate method <code>isPointInPath</code> (via <code>ctx.invoke("isPointInPath", x, y, ...)</code>).</li></ul>
<!--
<ul><li>Added <a href="http://burzak.com/proj/fxcanvas/demo/cakejs/examples/canvas.html">CAKE demo</a>.</li></ul>
--><p> <strong>Beta 3 (2010-12-25)</strong></p><p> <p>There are a lot of constructive changes and only a few new features.</p></p><ul><li>Added demo <a href="http://burzak.com/proj/fxcanvas/demo/colorize.html">Colorize image</a>.</li><li>Added demo <a href="http://burzak.com/proj/fxcanvas/demo/plasma.html">Interferoplasma</a>.</li><li>In Firefox 4 will be used new <a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.html">typed arrays</a> for ImageData.</li><li>(IE) Added <a href="http://burzak.com/proj/fxcanvas/tests/test_distorted_canvas_resize.html">distorted canvas resizing</a>.</li><li>(IE) Added <code>oncanvasresize</code> event. <a href="http://burzak.com/proj/fxcanvas/tests/explorercanvas.googlecode.com/examples/example3.html">Example</a>.</li><li>(IE) Fixed other bugs.</li></ul>
<strong>Beta 2 (2010-12-06)</strong><ul><li><code>onframe</code> attribute renamed to <code>oncanvasframe</code>.</li><li>Fixed <code>frameDuration</code> property for canvas backend.</li><li>(IE) Fixed <a href="http://burzak.com/proj/fxcanvas/tests/test_cursor_style.html">canvas cursor style</a>.</li><li>(IE) Fixed canvas.loadImage() for <a href="http://burzak.com/proj/fxcanvas/tests/developer.mozilla.org/samples/canvas-tutorial/3_4_canvas_gallery.html">series of images</a>.</li><li>(IE) Fixed <a href="http://burzak.com/proj/fxcanvas/tests/explorercanvas.googlecode.com/testcases/resizing.html">canvas resizing</a>.</li></ul><p> <strong>Beta 1 (2010-11-12)</strong></p><ul><li>Changed image data format, now it is array with length = image width <code>x</code> height where element is pixel value encoded in 32-bit integer. <a href="http://burzak.com/proj/fxcanvas/tests/data-structure-comparison.html">Data structure comparison</a>.</li><li>Experimental implementation of reusable Canvas path.</li><li>(IE) Images and text are now <a href="http://burzak.com/proj/fxcanvas/tests/test_clip.html">clipable</a>.</li><li>(IE) Improved Canvas Text API.</li><li>(IE) Rewritten initialization routine.</li><li>(IE) Some optimizations in Flash backend.</li><li>(IE) Basic implementation of method <code>drawImage([Canvas element], ...)</code>.</li><li>(IE) Now it is possible to draw image from another domain via proxy script (required PHP and cURL).</li></ul>
<h3>fxCanvas 0.15d - Super Mario - (2010-05-26) <a class='hh' name='fxCanvas_0.15d_-_Super_Mario_-_(2010-05-26)'>⁋</a></h3><ul><li>Fixed extended context in modest browser (Chrome, Firefox and company).</li></ul>
<h3>fxCanvas 0.15c - Super Mario - (2010-05-01) <a class='hh' name='fxCanvas_0.15c_-_Super_Mario_-_(2010-05-01)'>⁋</a></h3><p><img src="docs/images/hum14o.jpg" /></p><ul><li>Opera: added stub in <code>createImageData()</code>;</li><li>Internet Explorer: added configurable brand new context menu;</li><li>..... and freeing (right-) click event;</li><li>..... and now mouse behavior similar to standard-compliant browsers;</li><li>released extended canvas context (window.extCanvasRenderingContext2D), reasons: in some browsers native rendering context is not extendable;</li><li>solved animation interval problem, as a solution introduced canvas parameters <code>onframe</code> and <code>frameDuration</code>;</li><li>new, clear project structure;</li><li>the code splitting into IE and non-IE part;</li><li>fixed <code>HTMLCanvasElement</code> and <code>CanvasRenderingContext2D</code> in Internet Explorer;</li><li>as usual cleaned the code up and small optimizations;</li><li>... some other minor updates;</li></ul>
<h3>fxCanvas 0.1a - Mario - (2010-04-14) <a class='hh' name='fxCanvas_0.1a_-_Mario_-_(2010-04-14)'>⁋</a></h3><p><img src="docs/images/mario2.png" /> <ul><li>Fixed probably all stupid bugs.</li><li>Support of basic text API. (Thanks Fabien!)</li><li>Image data support. (Thanks jamie!)</li><li>Fixed isPointInPath() (on JS side).</li><li>Fixed extended context in Safari 3.</li><li>Clean up and code optimizations.</li><li>Flash exceptions handling.</li><li>drawImage chews Base64-encoded images and Canvas element.</li><li>Sync with flashcanvas trunk.</li><li>and other positive changes ...</li></ul></p><p><a href="http://code.google.com/p/fxcanvas/downloads/detail?name=fxcanvas-0.2(beta4)-supersonic.zip">Download source</a> (don't forget to file an <a href="http://code.google.com/p/fxcanvas/issues/list">issue</a> when you find something bad).</p>
<hr/>
Updated: Sat Feb 05 21:15:18 +0300 2011
</body>
</html>
fxcanvas's People
Stargazers
Watchers
fxcanvas's Issues
FxCanvas examples are not working in Internet Explorer
What steps will reproduce the problem?
1. Downloaded fxcanvas-20100131.zip from fxCanvas website.
2. Unzip and navigate to fxcanvas-20100131\tests folder
3. Right click on 'drawarea.html' and open in Internet Explorer.
4. Internet Explorer is not showing the area, but Firefox is showing the
area correctly.
What is the expected output? What do you see instead?
INternet Explorer should show area correctly. It is not shown.
What version of the product are you using? On what operating system?
I testing in Internet Explorer v8.0.6001
Latest version of fxcanvas is downloaded from website.
Please provide any additional information below.
Original issue reported on code.google.com by [email protected] on 17 Feb 2010 at 7:31
Attachments:
Flash 10.1 broke compatibility
What steps will reproduce the problem?
1. Install Flash 10.1 through Adobe's site
What is the expected output? What do you see instead?
All of the samples just show a blank canvas
What version of the product are you using? On what operating system?
WinXP SP3, IE 8, Flash 10.1
Please provide any additional information below.
To downgrade your player back to 10.0, you may have to download the standalone
uninstaller to "fix" IE. http://kb2.adobe.com/cps/116/4da116d3.html#10.1
Original issue reported on code.google.com by [email protected] on 8 Jul 2010 at 4:14
How are dynamically generated <canvas> tags handled in IE?
What steps will reproduce the problem?
1. Use jQuery or direct JS API to generate an empty <canvas> tag and append
to document body.
2. Attempt to call alert(canvas.getContext('2d'))
What is the expected output? What do you see instead?
An alert box with '[Object]' or some other output indicating that a
rendering context was returned.
Instead, IE throws an Error: "Object doesn't support this property or method"
What version of the product are you using? On what operating system?
IE 8 on Windows 7 Home Professional
I understand that a call needs made to force IE to replace the <canvas>
with an <object>. Can this be documented?
Original issue reported on code.google.com by [email protected] on 16 Apr 2010 at 6:30
canvas.toDataURL callback never called
What steps will reproduce the problem?
1. See attached .html file for test case
2.
3.
What is the expected output? What do you see instead?
Expected: an alert box containing PNG data URL of image. Actual: no alert box.
What version of the product are you using? On what operating system?
fxcanvas 20100130 on Windows7 IE8 with Flash 10,0,45,2
fxcanvas 20100130 on XP IE8 with Flash 9,0,124,0
Please provide any additional information below.
I added some debug messages to canvas.fscmd() to try to see what is happening.
I made it log all
commands (excluding com.flush) and it appears that response for
getData/getImageData is
simply never received. I was expecting "case com.data:" to occur, but it
doesn't.
Unfortunately I know too little of flash/flexsdk to dig deeper.
Original issue reported on code.google.com by [email protected] on 28 Mar 2010 at 4:43
Attachments:
URLs with Ports are not supported
I try to load an image in a canvas. Still trying to solve
// fixme sometime onload event is not triggered by unknown reasons when
// images are loaded from URL (test: 3_4_canvas_gallery)
but it seems that calling it from URLs with ports (http://test:8080/images...)
doesn't work at all.
Original issue reported on code.google.com by [email protected] on 19 Jan 2011 at 9:27
Problems with JooScript
+1 for dropping JooScript.
First of all I have had to modify it to make it loadable on demand (it uses
document.write that only works before the document is loaded).
Secondly it seems to break functionality with ExtJS 3.3.1+jQuery (selecting a
row in a grid does not work anymore) after loading the JavaScript file.
It seems that JooScript doesn't play nicely with other frameworks. If fxcanvas
is not essential dependent on JooScript it would be nice to drop it.
Original issue reported on code.google.com by [email protected] on 5 Apr 2011 at 10:45
Doesn't work in IE7 either
None of the example demos work in IE7.
Original issue reported on code.google.com by [email protected] on 1 Oct 2012 at 8:11
Doesn't work in IE8
None of the demos work in IE8
Original issue reported on code.google.com by [email protected] on 1 Oct 2012 at 8:06
toDataURL() creating issue for IE7 and IE8
i have draw a graph using plot method of jquery. Now i have used toDataURL()
method of canvas to get 64string for graph image. it is working fine with IE9
but giving error with ie7/ie8.
Original issue reported on code.google.com by [email protected] on 4 Oct 2011 at 10:50
Right click menu
I would like to call a function, when the user clicked with the right button.
Is it possible to remove the default flash popupmenu, and handle the right
click?
Thanks in advance
Original issue reported on code.google.com by [email protected] on 8 Mar 2012 at 5:55
ctx.invoke + getImageData never completes
What steps will reproduce the problem?
1. See attached .html file for test case
2.
3.
What is the expected output? What do you see instead?
Expected: an alert box to pop up. Actual: no alert box pops up.
What version of the product are you using? On what operating system?
fxcanvas 20100130 on Windows7 IE8 with Flash 10,0,45,2
fxcanvas 20100130 on XP IE8 with Flash 9,0,124,0
Please provide any additional information below.
I added some debug messages to canvas.fscmd() to try to see what is happening.
I made it log all
commands (excluding com.flush) and it appears that response for
getData/getImageData is
simply never received. I was expecting "case com.data:" to occur, but it
doesn't.
Unfortunately I know too little of flash/flexsdk to dig deeper.
Original issue reported on code.google.com by [email protected] on 28 Mar 2010 at 4:40
Attachments:
INALID_STATE_ERR DOM Error 11
What steps will reproduce the problem?
1. Create canvas element using document.createElement
2. Get ctx
3. Do something with it
It should just work, but it throws an error instead.
Original issue reported on code.google.com by [email protected] on 29 Jul 2013 at 5:53
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.