foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-27 09:50:52 -05:00
Code Issues Wiki Activity

change svg and terrain example to use fetch

Browse source
This commit is contained in:
liabru 2021-01-16 21:38:03 +00:00
parent 33e8fe8289
commit 5551cd51b1
3 changed files with 74 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/index.html
View file

@ -15,7 +15,6 @@
<!-- Libs --> <!-- Libs -->
<script src="./lib/decomp.js"></script> <script src="./lib/decomp.js"></script>
<script src="./lib/pathseg.js"></script> <script src="./lib/pathseg.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- Examples --> <!-- Examples -->
<script src="./js/Examples.js"></script> <script src="./js/Examples.js"></script>

53
examples/svg.js
View file

@ -33,24 +33,28 @@ Example.svg = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var svgs = [ if (typeof fetch !== 'undefined') {
'iconmonstr-check-mark-8-icon', var select = function(root, selector) {
'iconmonstr-paperclip-2-icon', return Array.prototype.slice.call(root.querySelectorAll(selector));
'iconmonstr-puzzle-icon', };
'iconmonstr-user-icon'
];
if (typeof $ !== 'undefined') { var loadSvg = function(url) {
for (var i = 0; i < svgs.length; i += 1) { return fetch(url)
(function(i) { .then(function(response) { return response.text(); })
$.get('./svg/' + svgs[i] + '.svg').done(function(data) { .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
var vertexSets = [], };
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
$(data).find('path').each(function(i, path) { ([
var points = Svg.pathToVertices(path, 30); './svg/iconmonstr-check-mark-8-icon.svg',
vertexSets.push(Vertices.scale(points, 0.4, 0.4)); './svg/iconmonstr-paperclip-2-icon.svg',
}); './svg/iconmonstr-puzzle-icon.svg',
'./svg/iconmonstr-user-icon.svg'
]).forEach(function(path, i) {
loadSvg(path).then(function(root) {
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
var vertexSets = select(root, 'path')
.map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, { World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: { render: {
@ -60,17 +64,14 @@ Example.svg = function() {
} }
}, true)); }, true));
}); });
})(i);
}
$.get('./svg/svg.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
}); });
loadSvg('./svg/svg.svg').then(function(root) {
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
var vertexSets = select(root, 'path')
.map(function(path) { return Svg.pathToVertices(path, 30); });
World.add(world, Bodies.fromVertices(400, 80, vertexSets, { World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
render: { render: {
fillStyle: color, fillStyle: color,
@ -79,6 +80,8 @@ Example.svg = function() {
} }
}, true)); }, true));
}); });
} else {
Common.warn('Fetch is not available. Could not load SVG.');
} }
World.add(world, [ World.add(world, [

25
examples/terrain.js
View file

@ -34,17 +34,24 @@ Example.terrain = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var terrain; if (typeof fetch !== 'undefined') {
var select = function(root, selector) {
return Array.prototype.slice.call(root.querySelectorAll(selector));
};
if (typeof $ !== 'undefined') { var loadSvg = function(url) {
$.get('./svg/terrain.svg').done(function(data) { return fetch(url)
var vertexSets = []; .then(function(response) { return response.text(); })
.then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
};
$(data).find('path').each(function(i, path) { loadSvg('./svg/terrain.svg')
vertexSets.push(Svg.pathToVertices(path, 30)); .then(function(root) {
}); var paths = select(root, 'path');
terrain = Bodies.fromVertices(400, 350, vertexSets, { var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });
var terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true, isStatic: true,
render: { render: {
fillStyle: '#060a19', fillStyle: '#060a19',
@ -67,6 +74,8 @@ Example.terrain = function() {
} }
})); }));
}); });
} else {
Common.warn('Fetch is not available. Could not load SVG.');
} }
// add mouse control // add mouse control