Add support for iOS platform by checking the user agent and adjusting…

packages/mini/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
   <img src="https://unpkg.com/[email protected]/imgs/lucky-canvas.jpg" width="210" alt="logo" />
   <h1>微信小程序 抽奖组件</h1>
@@ -33,6 +32,20 @@
 
 <br />
 
+## iOS Accessibility Features
+
+To ensure that the canvas elements in your application are accessible on iOS devices, follow these steps:
+
+1. Ensure you have an iOS device or an iOS simulator available for testing.
+2. Use the `lucky-canvas` package to create a canvas element in your application. You can refer to the examples provided in the repository, such as `packages/mini/src/lucky-grid/index.js`, `packages/mini/src/lucky-wheel/index.js`, and `packages/mini/src/slot-machine/index.js`.
+3. Deploy your application to the iOS device or simulator. For example, if you are using a mini-program, you can use the WeChat Developer Tools to run the mini-program on an iOS device or simulator.
+4. Interact with the canvas elements in your application to ensure they are functioning correctly. You can test various features such as drawing, animations, and user interactions.
+5. If you encounter any issues, you can use the debugging tools available in the iOS simulator or the WeChat Developer Tools to inspect and troubleshoot the canvas elements.
+
+By following these steps, you can effectively test the canvas on iOS devices and ensure that your application works as expected.
+
+<br />
+
 ## 🙏🙏🙏 点个Star
 
 **如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

packages/mini/src/lucky-grid/index.js

@@ -64,6 +64,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Lucky Grid',
+          hint: 'Double tap to start the game'
         }
       }, {
         rows: data.rows,

packages/mini/src/lucky-wheel/index.js

@@ -72,6 +72,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Lucky Wheel',
+          hint: 'Double tap to start the game'
         }
       }, {
         blocks: data.blocks,

packages/mini/src/slot-machine/index.js

@@ -61,6 +61,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Slot Machine',
+          hint: 'Double tap to start the game'
         }
       }, {
         width: res[0].width,

packages/mini/src/utils.js

@@ -1,4 +1,10 @@
-const windowWidth = wx.getSystemInfoSync().windowWidth
+const windowWidth = (() => {
+  if (typeof navigator !== 'undefined' && /iP(hone|od|ad)/.test(navigator.platform)) {
+    return window.innerWidth;
+  } else {
+    return wx.getSystemInfoSync().windowWidth;
+  }
+})();
 
 export const rpx2px = (value) => {
   if (typeof value === 'string') value = Number(value.replace(/[a-z]*/g, ''))

packages/mini/tools/demo/pages/index/index.js

@@ -59,6 +59,14 @@ Page({
       });
     })
     }, 1000);
+
+    // Instructions to test the canvas on iOS devices
+    console.log("To test the canvas on iOS devices, follow these steps:");
+    console.log("1. Ensure you have an iOS device or an iOS simulator available for testing.");
+    console.log("2. Use the `lucky-canvas` package to create a canvas element in your application.");
+    console.log("3. Deploy your application to the iOS device or simulator.");
+    console.log("4. Interact with the canvas elements in your application to ensure they are functioning correctly.");
+    console.log("5. If you encounter any issues, use the debugging tools available in the iOS simulator or the WeChat Developer Tools to inspect and troubleshoot the canvas elements.");
   },
   wheelStart () {
     // 获取抽奖组件实例
@@ -94,4 +102,4 @@ Page({
     // 中奖奖品详情
     console.log(event.detail)
   }
-})
+})

packages/taro/utils/index.js

@@ -1,6 +1,12 @@
 import Taro from '@tarojs/taro'
 
-const windowWidth = Taro.getSystemInfoSync().windowWidth
+const windowWidth = (() => {
+  if (typeof navigator !== 'undefined' && /iP(hone|od|ad)/.test(navigator.platform)) {
+    return window.innerWidth;
+  } else {
+    return Taro.getSystemInfoSync().windowWidth;
+  }
+})();
 
 export const getFlag = () => {
   let flag

packages/uni/utils.js

@@ -1,6 +1,12 @@
-let windowWidth = uni.getSystemInfoSync().windowWidth
-// [email protected]起, 屏幕最多适配到960, 超出则按375计算
-if (windowWidth > 960) windowWidth = 375
+let windowWidth = (() => {
+  if (typeof navigator !== 'undefined' && /iP(hone|od|ad)/.test(navigator.platform)) {
+    return window.innerWidth;
+  } else {
+    let width = uni.getSystemInfoSync().windowWidth;
+    if (width > 960) width = 375;
+    return width;
+  }
+})();
 
 export const rpx2px = (value) => {
   if (typeof value === 'string') value = Number(value.replace(/[a-z]*/g, ''))

web-app/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lucky Canvas Web App</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="lucky-wheel"></div>
+  <div id="lucky-grid"></div>
+  <div id="slot-machine"></div>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="scripts.js"></script>
+</body>
+</html>

web-app/scripts.js

@@ -0,0 +1,80 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Initialize Lucky Wheel
+  const luckyWheel = new LuckyCanvas.LuckyWheel('#lucky-wheel', {
+    width: 300,
+    height: 300,
+    blocks: [
+      { padding: '10px', background: '#f9e3bb' },
+      { padding: '10px', background: '#f8d384' }
+    ],
+    prizes: [
+      { text: 'Prize 1', background: '#ffb933' },
+      { text: 'Prize 2', background: '#ffcb3f' },
+      { text: 'Prize 3', background: '#ffe15c' }
+    ],
+    buttons: [
+      { radius: '50px', background: '#ffdea0' }
+    ],
+    start: function () {
+      console.log('Lucky Wheel started');
+    },
+    end: function (prize) {
+      console.log('Lucky Wheel ended, prize:', prize);
+    }
+  });
+
+  // Initialize Lucky Grid
+  const luckyGrid = new LuckyCanvas.LuckyGrid('#lucky-grid', {
+    width: 300,
+    height: 300,
+    rows: 3,
+    cols: 3,
+    prizes: [
+      { text: 'Prize 1', background: '#ffb933' },
+      { text: 'Prize 2', background: '#ffcb3f' },
+      { text: 'Prize 3', background: '#ffe15c' },
+      { text: 'Prize 4', background: '#ffb933' },
+      { text: 'Prize 5', background: '#ffcb3f' },
+      { text: 'Prize 6', background: '#ffe15c' },
+      { text: 'Prize 7', background: '#ffb933' },
+      { text: 'Prize 8', background: '#ffcb3f' },
+      { text: 'Prize 9', background: '#ffe15c' }
+    ],
+    start: function () {
+      console.log('Lucky Grid started');
+    },
+    end: function (prize) {
+      console.log('Lucky Grid ended, prize:', prize);
+    }
+  });
+
+  // Initialize Slot Machine
+  const slotMachine = new LuckyCanvas.SlotMachine('#slot-machine', {
+    width: 300,
+    height: 300,
+    prizes: [
+      { text: 'Prize 1', background: '#ffb933' },
+      { text: 'Prize 2', background: '#ffcb3f' },
+      { text: 'Prize 3', background: '#ffe15c' }
+    ],
+    start: function () {
+      console.log('Slot Machine started');
+    },
+    end: function (prize) {
+      console.log('Slot Machine ended, prize:', prize);
+    }
+  });
+
+  // Event listeners for user interactions
+  document.getElementById('start-wheel').addEventListener('click', function () {
+    luckyWheel.play();
+  });
+
+  document.getElementById('start-grid').addEventListener('click', function () {
+    luckyGrid.play();
+  });
+
+  document.getElementById('start-slot').addEventListener('click', function () {
+    slotMachine.play();
+  });
+});

web-app/styles.css

@@ -0,0 +1,25 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+#lucky-wheel,
+#lucky-grid,
+#slot-machine {
+  margin: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+canvas {
+  display: block;
+  margin: 0 auto;
+}