Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update @idraw/board examples

Browse source
This commit is contained in:
chenshenhai 2021-10-16 17:25:59 +08:00
parent 4b1c40b021
commit 9cb70a4d59
4 changed files with 73 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/board/examples/features/index.html
View file

@ -3,54 +3,15 @@
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
.preview {
margin-top: 60px;
margin-left: 200px;
}
</style>
</head>
<body>
<div id="mount"></div>
<div>
<span>scale</span>
<input id="scale" type="number" value="1"/>
</div>
<div>
<span>scrollX</span>
<input id="scrollX" type="number" value="0"/>
</div>
<div>
<span>scrollY</span>
<input id="scrollY" type="number" value="0"/>
</div>
<div>
<select id="cursor">
<option value="auto">auto</option>
<option value="move">move</option>
<option value="grab">grab</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
<option value="s-resize">s-resize</option>
<option value="w-resize">w-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
</select>
<button id="reset-cursor">Reset cursor</button>
</div>
<script src="./../../dist/index.global.js"></script>
<script type="module" src="./main.js"></script>
<iframe src="./main.html" frameBorder="0" class="preview"
width="500", height="500"></iframe>
</body>
</html>

4
packages/board/examples/features/lib/opts.js
View file

@ -1,6 +1,6 @@
export default {
width: 800,
height: 600,
width: 400,
height: 300,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4,

56
packages/board/examples/features/main.html Normal file
View file

@ -0,0 +1,56 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<div>
<span>scale</span>
<input id="scale" type="number" value="1"/>
</div>
<div>
<span>scrollX</span>
<input id="scrollX" type="number" value="0"/>
</div>
<div>
<span>scrollY</span>
<input id="scrollY" type="number" value="0"/>
</div>
<div>
<select id="cursor">
<option value="auto">auto</option>
<option value="move">move</option>
<option value="grab">grab</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
<option value="s-resize">s-resize</option>
<option value="w-resize">w-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
</select>
<button id="reset-cursor">Reset cursor</button>
</div>
<script src="./../../dist/index.global.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

20
packages/board/examples/features/main.js
View file

@ -10,17 +10,17 @@ const Board = window.iDrawBoard;
const mount = document.querySelector("#mount");
const board = new Board(mount, opts);
// const conf = {
// scale: 0.5,
// scrollX: 100,
// scrollY: 200,
// }
const conf = {
scale: 2,
scrollX: -200,
scrollY: -100,
};
scale: 1,
// scrollX: 100,
// scrollY: 200,
}
// const conf = {
// scale: 2,
// scrollX: -200,
// scrollY: -100,
// };
drawData(board);