|
|
@@ -3,128 +3,163 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Enhanced Button Selection</title>
|
|
|
+ <title>倒转房屋线条</title>
|
|
|
<style>
|
|
|
- canvas {
|
|
|
- border: 1px solid #000;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
+ .house {
|
|
|
+ position: relative;
|
|
|
+ width: 200px; /* 正方形的宽度 */
|
|
|
+ height: 200px; /* 正方形的高度 */
|
|
|
+ background-color: #f0f0f0; /* 正方形的颜色 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .house::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 100%; /* 从正方形底部开始 */
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ border-left: 100px solid transparent; /* 左边透明边 */
|
|
|
+ border-right: 100px solid transparent; /* 右边透明边 */
|
|
|
+ border-top: 100px solid #f0f0f0; /* 上边为倒立三角形的底边 */
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<canvas id="buttonCanvas" width="480" height="360"></canvas>
|
|
|
-
|
|
|
-<script>
|
|
|
- const canvas = document.getElementById('buttonCanvas');
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
-
|
|
|
- const buttonWidth = 100;
|
|
|
- const buttonHeight = 100;
|
|
|
- const padding = 10;
|
|
|
-
|
|
|
- const rows = 3;
|
|
|
- const cols = 4;
|
|
|
-
|
|
|
- const images = [
|
|
|
- 'https://via.placeholder.com/100/FF0000/FFFFFF?text=Red',
|
|
|
- 'https://via.placeholder.com/100/0000FF/FFFFFF?text=Blue',
|
|
|
- 'https://via.placeholder.com/100/00FF00/FFFFFF?text=Green',
|
|
|
- 'https://via.placeholder.com/100/FFFFFF/000000?text=White',
|
|
|
- 'https://via.placeholder.com/100/FFAA00/FFFFFF?text=Orange',
|
|
|
- 'https://via.placeholder.com/100/AAAAAA/FFFFFF?text=Gray',
|
|
|
- 'https://via.placeholder.com/100/FF00FF/FFFFFF?text=Magenta',
|
|
|
- 'https://via.placeholder.com/100/00FFFF/FFFFFF?text=Cyan',
|
|
|
- 'https://via.placeholder.com/100/FFFF00/FFFFFF?text=Yellow',
|
|
|
- 'https://via.placeholder.com/100/000000/FFFFFF?text=Black',
|
|
|
- 'https://via.placeholder.com/100/FF7777/FFFFFF?text=Pink',
|
|
|
- 'https://via.placeholder.com/100/7777FF/FFFFFF?text=Purple',
|
|
|
- ];
|
|
|
-
|
|
|
- let buttons = [];
|
|
|
- let selectedButtons = new Set();
|
|
|
-
|
|
|
- function loadImages(imageUrls, callback) {
|
|
|
- const loadedImages = [];
|
|
|
- let imagesToLoad = imageUrls.length;
|
|
|
-
|
|
|
- imageUrls.forEach((url, index) => {
|
|
|
- const img = new Image();
|
|
|
- img.src = url;
|
|
|
- img.onload = () => {
|
|
|
- loadedImages[index] = img;
|
|
|
- imagesToLoad--;
|
|
|
- if (imagesToLoad === 0) callback(loadedImages);
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function createButtons(images) {
|
|
|
- let x, y;
|
|
|
- for (let row = 0; row < rows; row++) {
|
|
|
- for (let col = 0; col < cols; col++) {
|
|
|
- const index = row * cols + col;
|
|
|
- x = col * (buttonWidth + padding);
|
|
|
- y = row * (buttonHeight + padding);
|
|
|
- buttons.push({ x, y, width: buttonWidth, height: buttonHeight, image: images[index], id: index });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function drawButtons() {
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- buttons.forEach(button => {
|
|
|
- // 绘制按钮图片
|
|
|
- ctx.drawImage(button.image, button.x, button.y, button.width, button.height);
|
|
|
-
|
|
|
- if (selectedButtons.has(button.id)) {
|
|
|
- // 绘制半透明灰色遮罩
|
|
|
- ctx.fillStyle = 'rgba(50, 50, 50, 0.5)';
|
|
|
- ctx.fillRect(button.x, button.y, button.width, button.height);
|
|
|
-
|
|
|
- // 绘制白色对勾图标
|
|
|
- ctx.fillStyle = 'white';
|
|
|
- ctx.font = '20px Arial';
|
|
|
- ctx.textAlign = 'center';
|
|
|
- ctx.textBaseline = 'middle';
|
|
|
- ctx.fillText('✔', button.x + button.width / 2, button.y + button.height / 2);
|
|
|
-
|
|
|
- // 添加边框
|
|
|
- ctx.strokeStyle = 'black';
|
|
|
- ctx.lineWidth = 5;
|
|
|
- ctx.strokeRect(button.x, button.y, button.width, button.height);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function handleCanvasClick(event) {
|
|
|
- const rect = canvas.getBoundingClientRect();
|
|
|
- const mouseX = event.clientX - rect.left;
|
|
|
- const mouseY = event.clientY - rect.top;
|
|
|
-
|
|
|
- buttons.forEach(button => {
|
|
|
- if (
|
|
|
- mouseX >= button.x &&
|
|
|
- mouseX <= button.x + button.width &&
|
|
|
- mouseY >= button.y &&
|
|
|
- mouseY <= button.y + button.height
|
|
|
- ) {
|
|
|
- if (selectedButtons.has(button.id)) {
|
|
|
- selectedButtons.delete(button.id); // 取消选中
|
|
|
- } else {
|
|
|
- selectedButtons.add(button.id); // 选中按钮
|
|
|
- }
|
|
|
- drawButtons();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- canvas.addEventListener('click', handleCanvasClick);
|
|
|
-
|
|
|
- loadImages(images, loadedImages => {
|
|
|
- createButtons(loadedImages);
|
|
|
- drawButtons();
|
|
|
- });
|
|
|
-</script>
|
|
|
+<div class="house">
|
|
|
+
|
|
|
+</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<!--<!DOCTYPE html>-->
|
|
|
+<!--<html lang="en">-->
|
|
|
+<!--<head>-->
|
|
|
+<!-- <meta charset="UTF-8">-->
|
|
|
+<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
|
|
|
+<!-- <title>Enhanced Button Selection</title>-->
|
|
|
+<!-- <style>-->
|
|
|
+<!-- canvas {-->
|
|
|
+<!-- border: 1px solid #000;-->
|
|
|
+<!-- display: block;-->
|
|
|
+<!-- margin: 0 auto;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- </style>-->
|
|
|
+<!--</head>-->
|
|
|
+<!--<body>-->
|
|
|
+<!--<canvas id="buttonCanvas" width="480" height="360"></canvas>-->
|
|
|
+
|
|
|
+<!--<script>-->
|
|
|
+<!-- const canvas = document.getElementById('buttonCanvas');-->
|
|
|
+<!-- const ctx = canvas.getContext('2d');-->
|
|
|
+
|
|
|
+<!-- const buttonWidth = 100;-->
|
|
|
+<!-- const buttonHeight = 100;-->
|
|
|
+<!-- const padding = 10;-->
|
|
|
+
|
|
|
+<!-- const rows = 3;-->
|
|
|
+<!-- const cols = 4;-->
|
|
|
+
|
|
|
+<!-- const images = [-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FF0000/FFFFFF?text=Red',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/0000FF/FFFFFF?text=Blue',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/00FF00/FFFFFF?text=Green',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FFFFFF/000000?text=White',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FFAA00/FFFFFF?text=Orange',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/AAAAAA/FFFFFF?text=Gray',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FF00FF/FFFFFF?text=Magenta',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/00FFFF/FFFFFF?text=Cyan',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FFFF00/FFFFFF?text=Yellow',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/000000/FFFFFF?text=Black',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/FF7777/FFFFFF?text=Pink',-->
|
|
|
+<!-- 'https://via.placeholder.com/100/7777FF/FFFFFF?text=Purple',-->
|
|
|
+<!-- ];-->
|
|
|
+
|
|
|
+<!-- let buttons = [];-->
|
|
|
+<!-- let selectedButtons = new Set();-->
|
|
|
+
|
|
|
+<!-- function loadImages(imageUrls, callback) {-->
|
|
|
+<!-- const loadedImages = [];-->
|
|
|
+<!-- let imagesToLoad = imageUrls.length;-->
|
|
|
+
|
|
|
+<!-- imageUrls.forEach((url, index) => {-->
|
|
|
+<!-- const img = new Image();-->
|
|
|
+<!-- img.src = url;-->
|
|
|
+<!-- img.onload = () => {-->
|
|
|
+<!-- loadedImages[index] = img;-->
|
|
|
+<!-- imagesToLoad--;-->
|
|
|
+<!-- if (imagesToLoad === 0) callback(loadedImages);-->
|
|
|
+<!-- };-->
|
|
|
+<!-- });-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- function createButtons(images) {-->
|
|
|
+<!-- let x, y;-->
|
|
|
+<!-- for (let row = 0; row < rows; row++) {-->
|
|
|
+<!-- for (let col = 0; col < cols; col++) {-->
|
|
|
+<!-- const index = row * cols + col;-->
|
|
|
+<!-- x = col * (buttonWidth + padding);-->
|
|
|
+<!-- y = row * (buttonHeight + padding);-->
|
|
|
+<!-- buttons.push({ x, y, width: buttonWidth, height: buttonHeight, image: images[index], id: index });-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- function drawButtons() {-->
|
|
|
+<!-- ctx.clearRect(0, 0, canvas.width, canvas.height);-->
|
|
|
+<!-- buttons.forEach(button => {-->
|
|
|
+<!-- // 绘制按钮图片-->
|
|
|
+<!-- ctx.drawImage(button.image, button.x, button.y, button.width, button.height);-->
|
|
|
+
|
|
|
+<!-- if (selectedButtons.has(button.id)) {-->
|
|
|
+<!-- // 绘制半透明灰色遮罩-->
|
|
|
+<!-- ctx.fillStyle = 'rgba(50, 50, 50, 0.5)';-->
|
|
|
+<!-- ctx.fillRect(button.x, button.y, button.width, button.height);-->
|
|
|
+
|
|
|
+<!-- // 绘制白色对勾图标-->
|
|
|
+<!-- ctx.fillStyle = 'white';-->
|
|
|
+<!-- ctx.font = '20px Arial';-->
|
|
|
+<!-- ctx.textAlign = 'center';-->
|
|
|
+<!-- ctx.textBaseline = 'middle';-->
|
|
|
+<!-- ctx.fillText('✔', button.x + button.width / 2, button.y + button.height / 2);-->
|
|
|
+
|
|
|
+<!-- // 添加边框-->
|
|
|
+<!-- ctx.strokeStyle = 'black';-->
|
|
|
+<!-- ctx.lineWidth = 5;-->
|
|
|
+<!-- ctx.strokeRect(button.x, button.y, button.width, button.height);-->
|
|
|
+<!-- }-->
|
|
|
+<!-- });-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- function handleCanvasClick(event) {-->
|
|
|
+<!-- const rect = canvas.getBoundingClientRect();-->
|
|
|
+<!-- const mouseX = event.clientX - rect.left;-->
|
|
|
+<!-- const mouseY = event.clientY - rect.top;-->
|
|
|
+
|
|
|
+<!-- buttons.forEach(button => {-->
|
|
|
+<!-- if (-->
|
|
|
+<!-- mouseX >= button.x &&-->
|
|
|
+<!-- mouseX <= button.x + button.width &&-->
|
|
|
+<!-- mouseY >= button.y &&-->
|
|
|
+<!-- mouseY <= button.y + button.height-->
|
|
|
+<!-- ) {-->
|
|
|
+<!-- if (selectedButtons.has(button.id)) {-->
|
|
|
+<!-- selectedButtons.delete(button.id); // 取消选中-->
|
|
|
+<!-- } else {-->
|
|
|
+<!-- selectedButtons.add(button.id); // 选中按钮-->
|
|
|
+<!-- }-->
|
|
|
+<!-- drawButtons();-->
|
|
|
+<!-- }-->
|
|
|
+<!-- });-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- canvas.addEventListener('click', handleCanvasClick);-->
|
|
|
+
|
|
|
+<!-- loadImages(images, loadedImages => {-->
|
|
|
+<!-- createButtons(loadedImages);-->
|
|
|
+<!-- drawButtons();-->
|
|
|
+<!-- });-->
|
|
|
+<!--</script>-->
|
|
|
+<!--</body>-->
|
|
|
+<!--</html>-->
|
