mirror of
https://github.com/idrawjs/idraw
synced 2026-05-23 17:48:23 +00:00
test: add main testing for @idraw/board
This commit is contained in:
chenshenhai
parent
27269cfccd
commit
1485d7ab7f
13 changed files with 301 additions and 320 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 164 KiB |
148
packages/board/examples/test/event.html
Normal file
148
packages/board/examples/test/event.html
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #aaaaaa;
|
||||
border-left: 1px solid #aaaaaa;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
height: 200;
|
||||
float: left;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title"></div>
|
||||
</div>
|
||||
<div class="box" id="mount-2"></div>
|
||||
</div>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 500,
|
||||
contextHeight: 450,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
color: '#666666',
|
||||
lineWidth: 8
|
||||
}
|
||||
}
|
||||
function drawBoard(board) {
|
||||
const ctx = board.getContext();
|
||||
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(5, 5, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(40, 40, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(80, 80, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(130, 130, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(300, 300, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(380, 380, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
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())
|
||||
})()
|
||||
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import event from './../../../../scripts/browser/event.js';
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
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);
|
||||
})()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<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; }
|
||||
#mount canvas {
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
border: 1px solid #aaaaaa40;
|
||||
/* 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>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount');
|
||||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
color: '#666666',
|
||||
lineWidth: 16
|
||||
}
|
||||
}
|
||||
const board = new Board(mount, opts);
|
||||
// board.on('wheelX', (deltaX) => {
|
||||
// console.log('deltaX =', deltaX);
|
||||
// })
|
||||
// board.on('wheelY', (deltaY) => {
|
||||
// console.log('deltaY =', deltaY);
|
||||
// })
|
||||
|
||||
const ctx = board.getContext();
|
||||
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(80, 80, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(160, 160, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(260, 260, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(500 - 10, 500 - 10, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(600, 600, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(790, 790, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(390, 340, 20, 20);
|
||||
|
||||
// board.scale(1.5);
|
||||
board.scrollX(-100);
|
||||
board.scrollY(-150);
|
||||
// board.scale(1);
|
||||
|
||||
// const result = board.scale(1);
|
||||
const result = board.scale(1);
|
||||
console.log('result =', result);
|
||||
board.draw();
|
||||
|
||||
console.log('scrollLineWidth = ', board.getScrollLineWidth())
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<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; }
|
||||
#mount canvas {
|
||||
.box canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
|
|
@ -14,41 +14,118 @@
|
|||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 200;
|
||||
float: left;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">basic</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">resetSize</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
const Board = window.iDrawBoard;
|
||||
|
||||
const mount = document.querySelector('#mount');
|
||||
<script>
|
||||
function drawBoard(board) {
|
||||
const ctx = board.getContext();
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, 300, 200);
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(5, 5, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(40, 40, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(80, 80, 100, 60);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(200 - 5, 150 - 5, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(150 - 5, 100 - 5, 10, 10);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const board = new Board(mount, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
|
||||
const ctx = board.getContext();
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(80, 80, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(160, 160, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
|
||||
|
||||
drawBoard(board);
|
||||
board.scale(0.5);
|
||||
board.scale(1);
|
||||
board.draw();
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-2');
|
||||
const opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
}
|
||||
const board = new Board(mount, opts);
|
||||
drawBoard(board);
|
||||
board.draw();
|
||||
|
||||
board.resetSize({
|
||||
width: 270,
|
||||
height: 180,
|
||||
contextWidth: 400,
|
||||
contextHeight: 320,
|
||||
devicePixelRatio: 4,
|
||||
});
|
||||
drawBoard(board);
|
||||
board.draw();
|
||||
|
||||
// board.scale(0.5)
|
||||
// board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<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; }
|
||||
#mount canvas {
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
border: 1px solid #aaaaaa40;
|
||||
/* 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>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount');
|
||||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
}
|
||||
const board = new Board(mount, opts);
|
||||
|
||||
const ctx = board.getContext();
|
||||
drawAction(ctx)
|
||||
board.draw();
|
||||
|
||||
for(let i = 0; i < 1000; i++) {
|
||||
board.resetSize({
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 800,
|
||||
contextHeight: 700,
|
||||
devicePixelRatio: 3,
|
||||
});
|
||||
}
|
||||
drawAction(ctx);
|
||||
board.scale(0.5)
|
||||
board.draw();
|
||||
|
||||
|
||||
function drawAction(ctx) {
|
||||
ctx.setFillStyle('#ffffff');
|
||||
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(80, 80, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(160, 160, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(260, 260, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(500 - 10, 500 - 10, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(600, 600, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(790, 790, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(500 - 10, 450 - 10, 20, 20);
|
||||
|
||||
// board.scale(1.5);
|
||||
board.scrollX(-200);
|
||||
board.scrollY(-250);
|
||||
board.scale(1);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -17,26 +17,47 @@
|
|||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #aaaaaa;
|
||||
border-left: 1px solid #aaaaaa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
height: 200;
|
||||
min-height: 200;
|
||||
float: left;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1"></div>
|
||||
<div class="box" id="mount-2"></div>
|
||||
<div class="box" id="mount-3"></div>
|
||||
<div class="box" id="mount-4"></div>
|
||||
<div class="box" id="mount-5"></div>
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">Scale 0.5 to 1</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Scale 2 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-3">
|
||||
<div class="title">Scale 2 to 1 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-4">
|
||||
<div class="title">Scale 0.5 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-5">
|
||||
<div class="title">Scale 0.5 and Console result</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
|
|
|
|||
|
|
@ -17,15 +17,26 @@
|
|||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #aaaaaa;
|
||||
border-left: 1px solid #aaaaaa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
height: 200;
|
||||
min-height: 200;
|
||||
float: left;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
<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; }
|
||||
#mount canvas {
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
border: 1px solid #aaaaaa40;
|
||||
/* 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>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount');
|
||||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
}
|
||||
const board = new Board(mount, opts);
|
||||
// board.on('wheelX', (deltaX) => {
|
||||
// console.log('deltaX =', deltaX);
|
||||
// })
|
||||
// board.on('wheelY', (deltaY) => {
|
||||
// console.log('deltaY =', deltaY);
|
||||
// })
|
||||
|
||||
const ctx = board.getContext();
|
||||
|
||||
ctx.setFillStyle('#ffffff');
|
||||
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(80, 80, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(160, 160, 200, 120);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(260, 260, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(500 - 10, 500 - 10, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(600, 600, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(790, 790, 200, 100);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(500 - 10, 450 - 10, 20, 20);
|
||||
|
||||
// board.scale(1.5);
|
||||
board.scrollX(-200);
|
||||
board.scrollY(-250);
|
||||
// board.scale(1);
|
||||
|
||||
// const result = board.scale(1);
|
||||
const result = board.scale(1);
|
||||
console.log('result =', result);
|
||||
board.draw();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
const pageList = [
|
||||
{ path: 'board/examples/test/main.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'board/examples/test/scale.html', w: 920, h: 420, delay: 500 },
|
||||
{ path: 'board/examples/test/scroll.html', w: 620, h: 210, delay: 500 },
|
||||
{ path: 'board/examples/test/reset-size.html', w: 400, h: 300, delay: 500 },
|
||||
{ path: 'board/examples/test/main.html', w: 620, h: 270, delay: 500 },
|
||||
{ path: 'board/examples/test/scale.html', w: 930, h: 540, delay: 500 },
|
||||
{ path: 'board/examples/test/scroll.html', w: 620, h: 270, delay: 500 },
|
||||
// { path: 'board/examples/test/event.html', w: 400, h: 300, delay: 500 },
|
||||
{ path: 'core/examples/test/rect.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/circle.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/text.html', w: 600, h: 400, delay: 500 },
|
||||
|
|
|
|||
Loading…
Reference in a new issue