2021-06-13 12:33:10 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style></style>
|
|
|
|
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
|
|
|
<style>
|
|
|
|
|
html,body { margin: 0; padding: 0; }
|
2021-08-14 03:33:30 +00:00
|
|
|
.box canvas {
|
|
|
|
|
border-right: 1px solid #aaaaaa40;
|
|
|
|
|
border-bottom: 1px solid #aaaaaa40;
|
2021-06-13 12:33:10 +00:00
|
|
|
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;
|
|
|
|
|
}
|
2021-08-14 03:33:30 +00:00
|
|
|
.list {
|
|
|
|
|
width: 910px;
|
|
|
|
|
overflow: hidden;
|
2021-08-14 04:31:04 +00:00
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
|
border-left: 1px solid #f0f0f0;
|
2021-08-14 03:33:30 +00:00
|
|
|
}
|
|
|
|
|
.box {
|
|
|
|
|
width: 300;
|
2021-08-14 06:45:07 +00:00
|
|
|
min-height: 220;
|
2021-08-14 03:33:30 +00:00
|
|
|
float: left;
|
2021-08-14 04:31:04 +00:00
|
|
|
border-right: 1px solid #f0f0f0;
|
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
.box .title {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #000;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 20px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-family: monospace;
|
2021-08-14 03:33:30 +00:00
|
|
|
}
|
2021-06-13 12:33:10 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
<div class="list">
|
2021-08-14 06:45:07 +00:00
|
|
|
<div class="box" id="mount-1">
|
|
|
|
|
<div class="title">Scroll by scrollX/scrollY</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box" id="mount-2">
|
|
|
|
|
<div class="title">Scroll by WheelEvent</div>
|
|
|
|
|
</div>
|
2021-08-14 03:33:30 +00:00
|
|
|
</div>
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2022-04-28 15:46:07 +00:00
|
|
|
<script src="../../../packages/board/dist/index.global.js"></script>
|
2021-06-13 12:33:10 +00:00
|
|
|
<script>
|
2021-08-14 03:33:30 +00:00
|
|
|
var opts = {
|
|
|
|
|
width: 300,
|
|
|
|
|
height: 200,
|
|
|
|
|
contextWidth: 500,
|
|
|
|
|
contextHeight: 450,
|
|
|
|
|
devicePixelRatio: 4,
|
|
|
|
|
canScroll: true,
|
|
|
|
|
scrollConfig: {
|
|
|
|
|
color: '#666666',
|
|
|
|
|
lineWidth: 8
|
|
|
|
|
}
|
2021-06-13 13:09:11 +00:00
|
|
|
}
|
2021-08-14 03:33:30 +00:00
|
|
|
function drawBoard(board) {
|
|
|
|
|
const ctx = board.getContext();
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
// ctx.setFillStyle('#ffffff');
|
|
|
|
|
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#f0f0f0');
|
|
|
|
|
ctx.fillRect(5, 5, 100, 60);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#cccccc');
|
|
|
|
|
ctx.fillRect(40, 40, 100, 60);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#c0c0c0');
|
|
|
|
|
ctx.fillRect(80, 80, 100, 60);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#e0e0e0');
|
|
|
|
|
ctx.fillRect(130, 130, 100, 50);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#e0e0e0');
|
|
|
|
|
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#c0c0c0');
|
|
|
|
|
ctx.fillRect(300, 300, 100, 50);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#cccccc');
|
|
|
|
|
ctx.fillRect(380, 380, 100, 50);
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
ctx.setFillStyle('#000');
|
|
|
|
|
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
(function() {
|
2023-02-12 06:01:56 +00:00
|
|
|
const Board = window.iDrawBoard;
|
2021-08-14 03:33:30 +00:00
|
|
|
const mount = document.querySelector('#mount-1');
|
|
|
|
|
const board = new Board(mount, opts);
|
|
|
|
|
// board.on('wheelX', (deltaX) => {
|
|
|
|
|
// console.log('deltaX =', deltaX);
|
|
|
|
|
// })
|
|
|
|
|
// board.on('wheelY', (deltaY) => {
|
|
|
|
|
// console.log('deltaY =', deltaY);
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
drawBoard(board)
|
|
|
|
|
|
|
|
|
|
// board.scale(1.5);
|
|
|
|
|
board.scrollX(-100);
|
|
|
|
|
board.scrollY(-125);
|
|
|
|
|
// board.scale(1);
|
|
|
|
|
|
|
|
|
|
// const result = board.scale(1);
|
|
|
|
|
const result = board.scale(1);
|
|
|
|
|
console.log('result =', result);
|
|
|
|
|
board.draw();
|
|
|
|
|
|
|
|
|
|
console.log('scrollLineWidth = ', board.getScrollLineWidth())
|
|
|
|
|
})()
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
</script>
|
2021-06-13 12:33:10 +00:00
|
|
|
|
2021-08-14 03:33:30 +00:00
|
|
|
<script type="module">
|
2022-04-28 15:46:07 +00:00
|
|
|
import event from '../../../scripts/browser/event.js';
|
2021-08-14 03:33:30 +00:00
|
|
|
(function() {
|
2023-02-12 06:01:56 +00:00
|
|
|
const Board = window.iDrawBoard;
|
2021-08-14 03:33:30 +00:00
|
|
|
const mount = document.querySelector('#mount-2');
|
|
|
|
|
const board = new Board(mount, opts);
|
|
|
|
|
drawBoard(board)
|
|
|
|
|
board.draw();
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
event.wheelX(100, {
|
|
|
|
|
clientX: 350,
|
|
|
|
|
clientY: 100,
|
|
|
|
|
});
|
|
|
|
|
event.wheelY(125, {
|
|
|
|
|
clientX: 350,
|
|
|
|
|
clientY: 100,
|
|
|
|
|
});
|
|
|
|
|
}, 500);
|
|
|
|
|
})()
|
2021-06-18 10:10:42 +00:00
|
|
|
|
2021-06-13 12:33:10 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
