You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.3 KiB
HTML
111 lines
3.3 KiB
HTML
1 month ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head lang="en">
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title></title>
|
||
|
|
<script type="text/javascript" src="../src/js/rulez.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="demo.css">
|
||
|
|
<link type="text/css" rel="stylesheet" href="../src/css/rulez-black.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="margin: 0;">
|
||
|
|
<div class="black-rect"></div>
|
||
|
|
<div class="content">
|
||
|
|
<button id="updateSize">update size</button>
|
||
|
|
zoom <input id="zoom" min="0" max="10" step="0.01" value="1" /><label id="zoomLabel">1</label>
|
||
|
|
|
||
|
|
<div id="scroll" style="">
|
||
|
|
<div style="width: 9000px; height: 9000px;">
|
||
|
|
<img id="img" src="demo.png" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ruler-horizontal">
|
||
|
|
<svg id="svgH" xmlns="http://www.w3.org/2000/svg"></svg>
|
||
|
|
</div>
|
||
|
|
<div class="ruler-vertical">
|
||
|
|
<svg id="svgV" xmlns="http://www.w3.org/2000/svg"></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var rulezH = new Rulez({
|
||
|
|
element: document.getElementById('svgH'),
|
||
|
|
layout: 'horizontal',
|
||
|
|
alignment: 'bottom',
|
||
|
|
textDefaults: {
|
||
|
|
rotation: -90,
|
||
|
|
centerText: true
|
||
|
|
},
|
||
|
|
guides: [
|
||
|
|
{
|
||
|
|
position: 200
|
||
|
|
},
|
||
|
|
{
|
||
|
|
position: 400
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
rulezH.render();
|
||
|
|
var rulezV = new Rulez({
|
||
|
|
element: document.getElementById('svgV'),
|
||
|
|
layout: 'vertical',
|
||
|
|
alignment: 'right',
|
||
|
|
textDefaults: {
|
||
|
|
rotation: -90,
|
||
|
|
centerText: {
|
||
|
|
by: 'height',
|
||
|
|
operation: 'sum' //'sum' or 'sub'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
texts: [
|
||
|
|
{
|
||
|
|
pixelGap: 100,
|
||
|
|
offset: 20
|
||
|
|
}
|
||
|
|
],
|
||
|
|
guides: [
|
||
|
|
{
|
||
|
|
position: 200
|
||
|
|
},
|
||
|
|
{
|
||
|
|
position: 400
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
rulezV.render();
|
||
|
|
var scroll = document.getElementById('scroll');
|
||
|
|
scroll.addEventListener('scroll', function () {
|
||
|
|
rulezH.scrollTo(scroll.scrollLeft);
|
||
|
|
rulezV.scrollTo(scroll.scrollTop);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('updateSize').addEventListener('click', function () {
|
||
|
|
rulezH.saveAsImage(function (imgs) {
|
||
|
|
img.src = imgs;
|
||
|
|
});
|
||
|
|
rulezH.resize();
|
||
|
|
rulezV.resize();
|
||
|
|
});
|
||
|
|
var img = document.getElementById('img');
|
||
|
|
var imgWidth = 0;
|
||
|
|
var imgHeight = 0;
|
||
|
|
var zoomLabel = document.getElementById('zoomLabel');
|
||
|
|
|
||
|
|
document.getElementById('zoom').addEventListener('change', function (event) {
|
||
|
|
if (!imgWidth) {
|
||
|
|
imgWidth = img.width;
|
||
|
|
imgHeight = img.height;
|
||
|
|
}
|
||
|
|
var scale = event.target.value;
|
||
|
|
img.style.width = imgWidth * scale + 'px';
|
||
|
|
img.style.height = imgHeight * scale + 'px';
|
||
|
|
rulezH.setScale(1 / scale);
|
||
|
|
rulezV.setScale(1 / scale);
|
||
|
|
zoomLabel.innerHTML = scale;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|