70 lines
2.6 KiB
HTML
70 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Florent</title>
|
|
<style>
|
|
.two {
|
|
display: inline-block;
|
|
max-width: 95%;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="svg"></div>
|
|
<div id="svg1" class="two"></div>
|
|
<div id="svg2" class="two"></div>
|
|
<script type="text/javascript" src="../../freesewing/dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/plugin-bundle/dist/browser.js"></script>
|
|
<script type="text/javascript" src="dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/plugin-theme/dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/plugin-designer/dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/plugin-debug/dist/browser.js"></script>
|
|
<script type="text/javascript" src="../../plugins/plugin-validate/dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/plugin-i18n/dist/browser.js"></script>
|
|
<script type="text/javascript" src="node_modules/@freesewing/models/dist/browser.js"></script>
|
|
<script>
|
|
let settings = {
|
|
"complete": true,
|
|
"idPrefix": "fs-",
|
|
"locale": "en",
|
|
"options": {
|
|
//"hemStyle": "rounded",
|
|
},
|
|
//"embed": true,
|
|
"sa": 10,
|
|
"paperless": true,
|
|
"measurements": { "headCircumference": 600 },
|
|
//only: ["chestPocketBag"]
|
|
};
|
|
var pattern = new freesewing.patterns.florent(settings);
|
|
pattern.use(freesewing.plugins.theme);
|
|
//pattern.use(freesewing.plugins.designer);
|
|
pattern.use(freesewing.plugins.validate);
|
|
pattern.draft();
|
|
//pattern.sampleOption("collarFlare");
|
|
document.getElementById("svg1").innerHTML = pattern.render();
|
|
|
|
function pointHover(evt) {
|
|
var point = evt.target;
|
|
var id = point.id;
|
|
var cx = point.getAttribute('x');
|
|
var cy = point.getAttribute('y');
|
|
var name = point.getAttribute('data-point');
|
|
var part = point.getAttribute('data-part');
|
|
console.log(name+' ('+cx+', '+cy+') @ '+part);
|
|
var scale = 2;
|
|
cx = cx-scale*cx;
|
|
cy = cy-scale*cy;
|
|
point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
|
|
pointUnhover(id);
|
|
}
|
|
function pointUnhover(id) {
|
|
setTimeout(function(){
|
|
document.getElementById(id).removeAttribute("transform", '');
|
|
}, 500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|