evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give users the option of wrapping an existing Context2D element

Browse Source
This commit is contained in:
Johnson Zhong 2016-09-02 13:14:03 +02:00
parent 6983b3d782
commit 648fdbd007
2 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
canvas2svg.js
View File

@ -212,6 +212,7 @@
/**
* The mock canvas context
* @param o - options include:
* ctx - existing Context2D to wrap around
* width - width of your canvas (defaults to 500)
* height - height of your canvas (defaults to 500)
* enableMirroring - enables canvas mirroring (get image data) (defaults to false)
@ -244,8 +245,15 @@
this.canvas = this; ///point back to this instance!
this.__document = options.document || document;
this.__canvas = this.__document.createElement("canvas");
this.__ctx = this.__canvas.getContext("2d");
// allow passing in an existing context to wrap around
// if a context is passed in, we know a canvas already exist
if (options.ctx) {
this.__ctx = options.ctx;
} else {
this.__canvas = this.__document.createElement("canvas");
this.__ctx = this.__canvas.getContext("2d");
}
this.__setDefaultStyles();
this.__stack = [this.__getStyleState()];

110
test/playground_wrapped_Context2D.html Normal file
View File

@ -0,0 +1,110 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas2Svg Playground</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/playground.css">
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="twelve columns">
<h5>Select an example</h5>
</div>
</div>
</form>
<form>
<div class="row">
<div class="twelve columns">
<!-- select content is generated by the command `gulp update_examples` -->
<select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
</div>
</div>
</form>
<div class="row">
<div class="six columns">
<h5>Canvas</h5>
</div>
<div class="six columns">
<h5>SVG</h5>
</div>
</div>
<div class="row">
<div class="six columns">
<canvas id="canvas" width="460" height="460"></canvas>
</div>
<div class="six columns" id="svg">
<canvas id="wrapped_canvas" width="460" height="460" style="display:none"></canvas>
</div>
</div>
<br>
<div class="row try">
<div class="twelve columns">
<h5>Or try your own!</h5>
</div>
</div>
<div class="row">
<div class="twelve columns">
<textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
</div>
</div>
<div class="row">
<div class="twelve columns">
<a href="#" class="button button-primary u-pull-right" id="render">Render</a>
</div>
</div>
</div>
<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../canvas2svg.js"></script>
<script type="text/javascript">
window.C2S_EXAMPLES = {};
</script>
<!-- examples content is generated by the command `gulp update_examples` -->
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
<script type="text/javascript">
(function () {
"use strict";
function drawExample (example) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
var svg = document.getElementById("svg");
// remove the latest svg (children[0] is the wrapped canvas element)
if (svg.children.length > 1) {
svg.removeChild(svg.children[1]);
}
var otherCanvas = document.getElementById("wrapped_canvas");
var wrappedCtx = otherCanvas.getContext("2d");
var c2s = new C2S({ctx:wrappedCtx, width:500, height:500});
example(ctx);
example(c2s);
svg.appendChild(c2s.getSvg());
}
$('#render').on('click', function(event) {
event.preventDefault();
var text = $("#textarea").val();
var drawFunction = new Function("ctx", text);
drawExample(drawFunction);
});
$('#select').on('change', function(event) {
var example = C2S_EXAMPLES[$(this).val()];
drawExample(example);
}).trigger('change');
}());
</script>
</body>
</html>