Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes & optimizations #66

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open

Fixes & optimizations #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
c7bd374
Fix issue with font_names with underscores throwing an error
mudcube Aug 24, 2017
ad783c2
Merge in fix #53
mudcube Nov 8, 2017
2370b45
Merge branch 'master' of https://github.com/gliffy/canvas2svg
mudcube Nov 8, 2017
b655c48
Reduce garbage collections
mudcube Dec 1, 2017
6c48f40
Add `fill-rule` support
mudcube Mar 9, 2018
386a4fb
Handle multiple strokes with single path
mudcube Mar 9, 2018
5fe19cc
Add identifier to `ctx` to differentiate between native context
mudcube Mar 10, 2018
8e3f9d7
Fix potential infinite loop during Pattern application
mudcube Mar 10, 2018
2b8944f
`patternUnits` set to `userSpaceOnUse`
mudcube Mar 10, 2018
344dcf6
Fix formatting for Travis
mudcube Mar 10, 2018
650557c
Convert Tabs to Spaces to match project formatting
mudcube Mar 10, 2018
c228ba4
Multiple fixes and improvements
mudcube Mar 11, 2018
c8d7985
Fix Save & Restore transformation test
mudcube Mar 11, 2018
c78a508
Create <def> for Paths with multiple fills or strokes
mudcube Mar 11, 2018
cfbd8ef
Fix Bug attempting to apply “d” attribute to “use” element
mudcube Mar 11, 2018
8b9ecdb
Create ID from `path` hash to cut down on duplicate <defs>
mudcube Mar 12, 2018
a7cce0c
Fix issue with ctx.transform being overwritten with DOMMatrix
mudcube Jul 5, 2018
e798234
Add package-lock.json
mudcube Jul 7, 2018
0326a84
Fix for clip and style application
mudcube Jul 7, 2018
f077935
Remember last test run, and rerun upon reload
mudcube Jul 7, 2018
dfd8713
Playground now updates textarea with code examples when chosen
mudcube Jul 7, 2018
c8fd6dc
Create <path> element only when needed
mudcube Jul 7, 2018
33ff423
Playground now has ability to reload current test
mudcube Jul 7, 2018
045413b
Fixed with all files in test/example
mudcube Jul 7, 2018
728c713
Prune unneeded save/restore groups
mudcube Jul 7, 2018
85cd5a1
Apply transforms directly to paths/gradients
mudcube Jul 8, 2018
015ba10
Ensure `element` exists when setting fill-rule
mudcube Jul 11, 2018
b5b56be
update @babel/core -> 7.8.3
mudcube Jan 17, 2020
61023f1
Convert Tabs to Spaces to match project formatting
mudcube Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
674 changes: 426 additions & 248 deletions canvas2svg.js
View file
Open in desktop

Large diffs are not rendered by default.

7,298 changes: 7,298 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"license": "MIT",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.8.3",
"chai": "^2.1.1",
"cheerio": "^0.19.0",
"gulp": "^3.9.0",
Expand Down
3 changes: 3 additions & 0 deletions test/css/playground.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@
margin-top: 20px;
}

#textarea {
height: 250px;
}
6 changes: 3 additions & 3 deletions test/example/arc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
window.C2S_EXAMPLES['arc'] = function(ctx) {

// Draw shapes
for (i = 0; i < 4; i++) {
for (j = 0; j < 3; j++) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
Expand All @@ -20,5 +20,5 @@ window.C2S_EXAMPLES['arc'] = function(ctx) {
}
}
}

};
6 changes: 3 additions & 3 deletions test/example/emptyArc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
window.C2S_EXAMPLES['emptyArc'] = function(ctx) {

// Draw shapes
for (i = 0; i < 4; i++) {
for (j = 0; j < 3; j++) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx.beginPath();
ctx.arc(100, 100, 100, Math.PI, Math.PI);
ctx.fill();
}
}

};
2 changes: 1 addition & 1 deletion test/example/globalalpha.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ window.C2S_EXAMPLES['globalalpha'] = function(ctx) {
ctx.globalAlpha = 0.2;

// Draw semi transparent circles
for (i=0;i<7;i++){
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
Expand Down
234 changes: 155 additions & 79 deletions test/playground.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,181 @@
<!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">
<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">
</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>
<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">
</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 = {};
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>
<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 () {
"use strict";

/** Load test from location.hash **/
if (location.hash) {
setCurrent(location.hash);
}

$('#render').on('click', function (event) {
event.preventDefault();
var text = $("#textarea").val();
var drawFunction = new Function("ctx", text);
drawExample(drawFunction);
});

$('#select').on('change', function () {
var id = $(this).val()
var example = C2S_EXAMPLES[id];
drawExample(example);
setCurrent(`#${id}`);
history.replaceState({}, "page 2", `#${id}`);
})

$("#textarea").on('keyup change', function () {
history.replaceState({}, "page 2", `#${btoa(this.value)}`);
})

function drawExample(example) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);

var c2s = new C2S(500, 500);
var svg = document.getElementById("svg");

function drawExample (example) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
var c2s = new C2S(500, 500);
var svg = document.getElementById("svg");
if (svg.children.length > 0) {
svg.removeChild(svg.children[0]);
}

if (svg.children.length > 0) {
svg.removeChild(svg.children[0]);
}
ctx.save();
example(ctx);
example(c2s);
ctx.restore();

example(ctx);
example(c2s);
svg.appendChild(c2s.getSvg());
}

svg.appendChild(c2s.getSvg());
}
function setCurrent(data) {
var id = data.substr(1);
var fn = C2S_EXAMPLES[id];
if (!fn) {
try {
eval(`window.fn = function (ctx) {${atob(id)}}`);
fn = window.fn;
} catch (err) {
fn = C2S_EXAMPLES['arc'];
}
}

$('#render').on('click', function(event) {
event.preventDefault();
var text = $("#textarea").val();
var drawFunction = new Function("ctx", text);
drawExample(drawFunction);
});
var value = fn;
if (!value) {
return;
}

$('#select').on('change', function(event) {
var example = C2S_EXAMPLES[$(this).val()];
drawExample(example);
}).trigger('change');
value = value.toString();
value = value.slice(value.indexOf("{") + 1, value.lastIndexOf("}"));
value = value.split("\n");
value = value.reduce((currentValue, value) => {
if (value.trim()) {
return currentValue + value + "\n";
}
return currentValue;
}, "");

}());
$('#select').val(id);
$("#textarea").val(value);
drawExample(fn);
}
}());
</script>
</body>
</html>