@antv/f6-plugin/es/time-bar/ui/control-bar/play-btn.js

F6 plugin

import { createSegmentNode } from '@antv/f6-ui';
import { dispatch } from '../../dispatcher';
import { SLIDER_PAUSE, SLIDER_PLAY } from '../../utils/const';

function createPlayBtn(style) {
  var _a = style || {},
      _b = _a.radius,
      radius = _b === void 0 ? 15 : _b,
      fill = _a.fill; // 播放按钮中间三角形的高


  var triH = radius * Math.sqrt(3) / 2;
  var html = "\n  <div id='play_Btn'>\n    <shape class=\"start\" type='path' path='[\n      [\"M\", 0 , 0],\n      [\"L\", " + triH + " , " + radius / 2 + "],\n      [\"L\", 0 , " + radius + "]\n    ]'/>\n    <div class=\"pause\">\n      <shape class='pause_0' type='rect' />\n      <shape class='pause_1' type='rect' />\n    </div>\n  </div>";
  var css = "\n    #play_Btn {\n      width: " + radius * 2 + ";\n      height: " + radius * 2 + ";\n      background: #fff;\n      border: 1 solid " + fill + ";\n      border-radius: " + radius + ";\n    }\n    .start{\n      position: absolute;\n      top: " + radius / 2 + ";\n      left: " + (radius - triH / 2 + 1) + " ;\n      background: " + fill + ";\n      width: " + radius + ";\n      height: " + radius + ";\n    }\n    .pause {\n      display: none;\n    }\n    .pause shape {\n      position: absolute;\n      background: " + fill + ";\n      width: " + radius / 4 + ";\n      height: " + radius + ";\n    }\n    .pause_1 {\n      left: " + 4 * radius / 8 + ";\n    }\n    .pause {\n      position: absolute;\n      top: " + radius / 2 + ";\n      left: " + 5 * radius / 8 + ";\n    }\n  ";
  var node = createSegmentNode(html, css);
  var startNode = node.query('.start');
  var pauseNode = node.query('.pause');
  var isPause = true;

  function update() {
    startNode.setStyle('display', isPause ? 'flex' : 'none');
    pauseNode.setStyle('display', isPause ? 'none' : 'flex');
  }

  update();
  node.on('tap', function () {
    dispatch(isPause ? SLIDER_PLAY : SLIDER_PAUSE);
    isPause = !isPause;
    update();
  });
  return node;
}

export default createPlayBtn;