返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-三方组件水波纹案例

李洋水蛟龙
2022-02-24 11:44:27
阅读量0
0
1
1.png

主代码页，示例代码：
  1. /*Index.hml*/
  2.     <stack class="container-stack">
  3.         <text class="txt">点击出现水波</text>
  4.         <canvas ref="ref_canvas" class="canvas" @touchstart='touchstartfunc' on:click="handleClick"/>
  5.     </stack>

  7. </div>

  9. Index.css
  10. .container {
  11.     flex-direction: column;
  12.     justify-content: center;
  13.     align-items: center;
  14.     height: 100%;
  15. /*    background-color: #5e7c85;*/
  16. }

  18. .div-titlebar {
  19.     position: absolute;
  20.     top: 52px;
  21. }

  23. .container-stack {
  24.     align-items: center;
  25. }

  27. .canvas {
  28.     width: 340px;
  29.     height: 120px;
  30.     border: 1px solid #111;
  31.     justify-content: center;
  32.     align-items: center;
  33.     align-content: center;
  34.     margin-left: 10px;
  35.     margin-right: 10px;
  36.     border-radius: 8px;
  37. }

  39. .txt {
  40.     align-items: center;
  41.     width: 100%;
  42.     height: 40px;
  43.     font-size: 30px;
  44.     text-align: center;
  45.     color: #111;
  46. }

  48. [url=home.php?mod=space&uid=205723]@MEDIA[/url] screen and (device-type: phone) and (orientation: landscape) {
  49.     .canvas {
  50.         width: 700px;
  51.     }
  52. }


  55. /*index.hml*/
  56. import device from '@system.device';

  58. var ctx;

  60. var mDownX;
  61. var mDownY;

  63. const DRAW_RADIUS_ZERO = 0;
  64. const DRAW_RADIUS_MOVE = 50;

  66. const DURATION = 400;
  67. const FREQUENCY = 10;
  68. var mCycle;

  70. /*绘制的半径*/
  71. var mDrawRadius;
  72. /*绘制的最大半径*/
  73. var mMaxRadius = 0;

  75. var mStepRadius = 0;

  77. var timer = null;

  79. var viewWidth = 340;
  80. var viewHeight = 118;

  82. export default {
  83.     data: {

  85.     },
  86.     onInit() {
  87.         mCycle = DURATION / FREQUENCY;
  88.         mCycle = 3.0 * mCycle;
  89.     },
  90.     onShow() {
  91.         console.log("luzhen onShow");
  92.         device.getInfo({
  93.             success: function(data) {
  94.                 if (data.windowWidth < data.windowHeight) {
  95.                     viewWidth = 338;
  96.                 } else {
  97.                     viewWidth = 694;
  98.                 }
  99.             },
  100.             fail: function(data, code) {
  101.                 console.log('Failed to obtain device information. Error code:'+ code + '; Error information: ' + data);
  102.             },
  103.         });
  104.         this.clipPath();
  105.     },
  106.     clipPath() {
  107.         const el = this.$refs.ref_canvas;
  108.         ctx = el.getContext('2d', {
  109.             antialias: true
  110.         });

  112.         let radius = 8;
  113.         ctx.beginPath();
  114.         ctx.lineWidth = 0;
  115.         ctx.strokeStyle = '#FFFFFF';
  116.         ctx.moveTo(0, radius);
  117.         ctx.bezierCurveTo(0, radius, 0, 0, radius, 0);
  118.         ctx.lineTo(viewWidth - radius, 0);
  119.         ctx.bezierCurveTo(viewWidth - radius, 0, viewWidth, 0, viewWidth, radius);
  120.         ctx.lineTo(viewWidth, viewHeight - radius);
  121.         ctx.bezierCurveTo(viewWidth, viewHeight - radius, viewWidth, viewHeight, viewWidth - radius, viewHeight);
  122.         ctx.lineTo(radius, viewHeight);
  123.         ctx.bezierCurveTo(radius, viewHeight, 0, viewHeight, 0, viewHeight - radius);
  124.         ctx.closePath();
  125.         ctx.clip();
  126.         ctx.stroke();
  127.     },
  128.     touchstartfunc(msg) {
  129.         mDownX = msg.touches[0].localX;
  130.         mDownY = msg.touches[0].localY;

  132.         this.updateDrawData();

  134.         mStepRadius = 5 * mStepRadius;

  136.         if (timer != null) {
  137.             clearInterval(timer);
  138.             timer = null;
  139.         }
  140.         timer = setInterval(this.run, 50);
  141.     },
  142.     updateDrawData() {
  143.         this.setDrawRadius(DRAW_RADIUS_ZERO);

  145.         /*计算最大半径*/
  146.         let radiusLeftTop = Math.sqrt((mDownX - 10) * (mDownX - 10) + mDownY * mDownY);
  147.         let radiusRightTop = Math.sqrt((viewWidth - (mDownX - 10)) *
  148.         (viewWidth - (mDownX - 10)) +
  149.         mDownY * mDownY);
  150.         let radiusLeftBottom = Math.sqrt((mDownX - 10) * (mDownX - 10) +
  151.         (viewHeight - mDownY) * (viewHeight - mDownY));
  152.         let radiusRightBottom = Math.sqrt((viewWidth - (mDownX - 10)) * (viewWidth - (mDownX - 10)) +
  153.         (viewHeight - mDownY) * (viewHeight - mDownY));

  155.         let radiusArr = [radiusLeftTop, radiusRightTop, radiusLeftBottom, radiusRightBottom];
  156.         let i = 0;
  157.         for (; i < radiusArr.length; i++) {
  158.             mMaxRadius = Math.max(mMaxRadius, radiusArr[i]);
  159.         }

  161.         mStepRadius = mMaxRadius / mCycle;
  162.     },
  163.     setDrawRadius(radius) {
  164.         mDrawRadius = radius;
  165.     },
  166.     run() {
  167.         mDrawRadius = mDrawRadius + mStepRadius;

  169.         ctx.clearRect(0, 0, viewWidth, 120);
  170.         ctx.beginPath();
  171.         ctx.strokeStyle = '#58FAAC';
  172.         ctx.fillStyle = '#58FAAC';
  173.         ctx.globalAlpha = 0.7;

  175.         if (mDrawRadius > mMaxRadius) {
  176.             clearInterval(timer);
  177.             timer = null;
  178.             this.setDrawRadius(DRAW_RADIUS_ZERO);
  179.             ctx.arc((mDownX - 10), mDownY, mMaxRadius, 0, 6.28);
  180.             return;
  181.         }

  183.         ctx.arc((mDownX - 10), mDownY, mDrawRadius, 0, 6.28);
  184.         ctx.stroke();
  185.         ctx.fill();
  186.     }
  187. }
复制代码

案例效果：
1.png
附件：
HarmonyOS应用开发-三方组件水波纹案例.docx
(38.03 KB, 下载次数: 0)

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友