foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-12-26 13:49:01 -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 -->
<script src="./lib/decomp.js"></script>
<script src="./lib/pathseg.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- Examples -->
<script src="./js/Examples.js"></script>

67
examples/svg.js
View file

@ -33,43 +33,44 @@ Example.svg = function() {
Runner.run(runner, engine);
// add bodies
var svgs = [
'iconmonstr-check-mark-8-icon',
'iconmonstr-paperclip-2-icon',
'iconmonstr-puzzle-icon',
'iconmonstr-user-icon'
];
if (typeof fetch !== 'undefined') {
var select = function(root, selector) {
return Array.prototype.slice.call(root.querySelectorAll(selector));
};
if (typeof $ !== 'undefined') {
for (var i = 0; i < svgs.length; i += 1) {
(function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
var loadSvg = function(url) {
return fetch(url)
.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) {
var points = Svg.pathToVertices(path, 30);
vertexSets.push(Vertices.scale(points, 0.4, 0.4));
});
([
'./svg/iconmonstr-check-mark-8-icon.svg',
'./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']);
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color,
lineWidth: 1
}
}, true));
});
})(i);
}
var vertexSets = select(root, 'path')
.map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });
$.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));
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color,
lineWidth: 1
}
}, true));
});
});
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, {
render: {
@ -79,6 +80,8 @@ Example.svg = function() {
}
}, true));
});
} else {
Common.warn('Fetch is not available. Could not load SVG.');
}
World.add(world, [

69
examples/terrain.js
View file

@ -34,39 +34,48 @@ Example.terrain = function() {
Runner.run(runner, engine);
// add bodies
var terrain;
if (typeof fetch !== 'undefined') {
var select = function(root, selector) {
return Array.prototype.slice.call(root.querySelectorAll(selector));
};
if (typeof $ !== 'undefined') {
$.get('./svg/terrain.svg').done(function(data) {
var vertexSets = [];
var loadSvg = function(url) {
return fetch(url)
.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) {
vertexSets.push(Svg.pathToVertices(path, 30));
loadSvg('./svg/terrain.svg')
.then(function(root) {
var paths = select(root, 'path');
var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });
var terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
fillStyle: '#060a19',
strokeStyle: '#060a19',
lineWidth: 1
}
}, true);
World.add(world, terrain);
var bodyOptions = {
frictionAir: 0,
friction: 0.0001,
restitution: 0.6
};
World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
if (Query.point([terrain], { x: x, y: y }).length === 0) {
return Bodies.polygon(x, y, 5, 12, bodyOptions);
}
}));
});
terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
fillStyle: '#060a19',
strokeStyle: '#060a19',
lineWidth: 1
}
}, true);
World.add(world, terrain);
var bodyOptions = {
frictionAir: 0,
friction: 0.0001,
restitution: 0.6
};
World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
if (Query.point([terrain], { x: x, y: y }).length === 0) {
return Bodies.polygon(x, y, 5, 12, bodyOptions);
}
}));
});
} else {
Common.warn('Fetch is not available. Could not load SVG.');
}
// add mouse control