Skip to content

Instantly share code, notes, and snippets.

@TheZorkij

TheZorkij/zoner.html

Created May 27, 2020 17:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TheZorkij/faffeb8faf37fe2f5c1b4ef5cbf7f463 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TheZorkij/faffeb8faf37fe2f5c1b4ef5cbf7f463 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zoner.html
<!doctype html>
<html>
<head>
<title>Zoner</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
.sel {border: 1px solid red; height: 30px; width: 100px; cursor: pointer; position: absolute; z-index: 1;}
.container {position: relative; border: 1px solid #ddd; margin-bottom: 20px; margin: 0 200px 0 200px; width: 600px;}
</style>
<div id="container">
<div class="container">
<img id="image" style="display: block; max-width: 100%;" src="mawd_png_$136.45_p_1.png" />
<div class="sel" v-for="reg in data.formFields" :id="reg.num"
v-bind:style="{top: reg.fieldValue.boundingPoly.normalizedVertices[0].y * 100 + '%',
left: reg.fieldValue.boundingPoly.normalizedVertices[0].x * 100 + '%',
height: (reg.fieldValue.boundingPoly.normalizedVertices[3].y - reg.fieldValue.boundingPoly.normalizedVertices[0].y) * 100 + '%',
width: (reg.fieldValue.boundingPoly.normalizedVertices[1].x - reg.fieldValue.boundingPoly.normalizedVertices[0].x) * 100 + '%'}">
<!-- 0 = left top; 1 = right top; 2 = right bottom; 3 = left bottom -->
</div>
</div>
<!-- <pre v-for="reg in data">{{reg}}</pre> -->
</div>
<script>
var state = new Vue({
el: '#container',
data: {data: null}
});
$.getJSON('http://localhost:1234/json', function (res) {
state.data = res.pages[0];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment