javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？-6ren

javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？

转载作者：行者123 更新时间：2023-11-28 14:34:20

好的，所以我有一个列表 nav 可以导航到带有旋转木马幻灯片的某个幻灯片，smoke.js 在访问该站点时加载并自动启动，这正是我想要的，但是当他们单击“主页”按钮以外的任何 nav 按钮，我需要它来结束烟雾动画，如果他们单击主页按钮返回主页幻灯片，我需要它来重新启动烟雾机。我该怎么做？

这里是 smoke.js 的代码笔 codepen :

var smokemachine = function(context, color) {
  color = color || [24, 46.8, 48.2]
  var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var lastframe;
  var currentparticles = []
  var pendingparticles = []

  var buffer = document.createElement('canvas'),
    bctx = buffer.getContext('2d')

  buffer.width = 20
  buffer.height = 20

  var opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 5, 7, 4, 4, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 17, 27, 41, 52, 56, 34, 23, 15, 11, 4, 9, 5, 1, 0, 0, 0, 0, 0, 0, 1, 45, 63, 57, 45, 78, 66, 52, 41, 34, 37, 23, 20, 0, 1, 0, 0, 0, 0, 1, 43, 62, 66, 64, 67, 115, 112, 114, 56, 58, 47, 33, 18, 12, 10, 0, 0, 0, 0, 39, 50, 63, 76, 87, 107, 105, 112, 128, 104, 69, 64, 29, 18, 21, 15, 0, 0, 0, 7, 42, 52, 85, 91, 103, 126, 153, 128, 124, 82, 57, 52, 52, 24, 1, 0, 0, 0, 2, 17, 41, 67, 84, 100, 122, 136, 159, 127, 78, 69, 60, 50, 47, 25, 7, 1, 0, 0, 0, 34, 33, 66, 82, 113, 138, 149, 168, 175, 82, 142, 133, 70, 62, 41, 25, 6, 0, 0, 0, 18, 39, 55, 113, 111, 137, 141, 139, 141, 128, 102, 130, 90, 96, 65, 37, 0, 0, 0, 2, 15, 27, 71, 104, 129, 129, 158, 140, 154, 146, 150, 131, 92, 100, 67, 26, 3, 0, 0, 0, 0, 46, 73, 104, 124, 145, 135, 122, 107, 120, 122, 101, 98, 96, 35, 38, 7, 2, 0, 0, 0, 50, 58, 91, 124, 127, 139, 118, 121, 177, 156, 88, 90, 88, 28, 43, 3, 0, 0, 0, 0, 30, 62, 68, 91, 83, 117, 89, 139, 139, 99, 105, 77, 32, 1, 1, 0, 0, 0, 0, 0, 16, 21, 8, 45, 101, 125, 118, 87, 110, 86, 64, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 28, 79, 79, 117, 122, 88, 84, 54, 46, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 6, 55, 61, 68, 71, 30, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 23, 25, 20, 12, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12, 9, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0]

  var data = bctx.createImageData(20, 20)
  var d = data.data

  for (var i = 0; i < d.length; i += 4) {
    d[i] = color[0]
    d[i + 1] = color[1]
    d[i + 2] = color[2]
    d[i + 3] = opacities[i / 4]
  }

  bctx.putImageData(data, 0, 0)

  var imagewidth = 20 * 5
  var imageheight = 20 * 5

  function particle(x, y, l) {
    this.x = x
    this.y = y
    this.age = 0
    this.vx = (Math.random() * 8 - 4) / 100
    this.startvy = -(Math.random() * 30 + 10) / 100
    this.vy = this.startvy
    this.scale = Math.random() * .5
    this.lifetime = Math.random() * l + l / 2
    this.finalscale = 5 + this.scale + Math.random()

    this.update = function(deltatime) {
      this.x += this.vx * deltatime
      this.y += this.vy * deltatime
      var frac = Math.pow((this.age) / this.lifetime, .5)
      this.vy = (1 - frac) * this.startvy
      this.age += deltatime
      this.scale = frac * this.finalscale
    }

    this.draw = function() {
      context.globalAlpha = (1 - Math.abs(1 - 2 * (this.age) / this.lifetime)) / 8
      var off = this.scale * imagewidth / 2
      var xmin = this.x - off
      var xmax = xmin + this.scale * imageheight
      var ymin = this.y - off
      var ymax = ymin + this.scale * imageheight
      context.drawImage(buffer, xmin, ymin, xmax - xmin, ymax - ymin)
    }
  }


  function addparticles(x, y, n, lifetime) {
    lifetime = lifetime || 4000
    n = n || 10
    if (n < 1) return Math.random() <= n && pendingparticles.push(new particle(x, y, lifetime));
    for (var i = 0; i < n; i++) {
      pendingparticles.push(new particle(x, y, lifetime))
    };
  }

  function updateanddrawparticles(deltatime) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    deltatime = deltatime || 16
    var newparticles = []
    currentparticles = currentparticles.concat(pendingparticles)
    pendingparticles = []

    currentparticles.forEach(function(p) {
      p.update(deltatime)
      if (p.age < p.lifetime) {
        p.draw()
        newparticles.push(p)
      }
    })
    currentparticles = newparticles
  }

  function frame(time) {
    if (running) {
      var deltat = time - lastframe
      lastframe = time;

      updateanddrawparticles(deltat)

      polyfillAnimFrame(frame)
    }
  }

  var running = false

  function start() {
    running = true
    polyfillAnimFrame(function(time) {
      lastframe = time
      polyfillAnimFrame(frame)
    })
  }

  function stop() {
    running = false
  }

  return {
    start: start,
    stop: stop,
    step: updateanddrawparticles,
    addsmoke: addparticles
  }

}



var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight

var party = smokemachine(ctx, [54, 16.8, 18.2])
party.start() // start animating

onmousemove = function(e) {
  var x = e.clientX
  var y = e.clientY
  var n = .5
  var t = Math.floor(Math.random() * 200) + 3800
  party.addsmoke(x, y, n, t)
}

setInterval(function() {
  party.addsmoke(innerWidth / 2, innerHeight, 1)
}, 100)

html,
body {
  position: absolute;
  margin: 0;
  width: 100%;
}

#hi {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}

#hi a {
  color: #fff;
  font-size: 80px;
  text-decoration: none;
  font-family: Lobster;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <ul>
      <li>
        <a href="#" class="current">
          <span data-text="Home" data-target="#carouselExampleIndicators" data-slide-to="0">Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="About" data-target="#carouselExampleIndicators" data- slide-to="1">About</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Chronic Menu" data-target="#carouselExampleIndicators" data-slide-to="2">Chronic Menu</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Strains" data-target="#carouselExampleIndicators" data- slide-to="3">Strains</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Gallery" data-target="#carouselExampleIndicators" data- slide-to="4">Gallery</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Reviews" data-target="#carouselExampleIndicators" data- slide-to="5">Reviews</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<canvas id="canvas" width="1777" height="898"></canvas>

最佳答案

如果您检查 documentation of the smoke.js plugin on GitHub ，您会看到有两种方法:start()(启动烟雾)和 stop()(停止烟雾)。因此，您要做的是在单击导航但不是主页时调用 party.stop()，如果是主页则调用 party.start()主页选项。

像这样(我的代码在顶部):

Notice: the .stop() method will stop the smoke but it want delete the existing smoke, it's more like a pause. It is unclear if you also want to remove the existing smoke, but if you need to do it, you can follow the instructions on this question to clean the canvas.

var navbaroptions = document.querySelectorAll("nav a");
for (var x = 0; x < navbaroptions.length; x++) {
  navbaroptions[x].addEventListener("click", function() {
    const canvas = document.querySelector("#canvas");
    if (this.id === "option-home") {
      party.start();
      canvas.removeAttribute("hidden");
    } else {
      party.stop();
      // hide the canvas
      canvas.setAttribute("hidden", true);
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
  });
}

var smokemachine = function(context, color) {
  color = color || [24, 46.8, 48.2]
  var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var lastframe;
  var currentparticles = []
  var pendingparticles = []

  var buffer = document.createElement('canvas'),
    bctx = buffer.getContext('2d')

  buffer.width = 20
  buffer.height = 20

  var opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 5, 7, 4, 4, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 17, 27, 41, 52, 56, 34, 23, 15, 11, 4, 9, 5, 1, 0, 0, 0, 0, 0, 0, 1, 45, 63, 57, 45, 78, 66, 52, 41, 34, 37, 23, 20, 0, 1, 0, 0, 0, 0, 1, 43, 62, 66, 64, 67, 115, 112, 114, 56, 58, 47, 33, 18, 12, 10, 0, 0, 0, 0, 39, 50, 63, 76, 87, 107, 105, 112, 128, 104, 69, 64, 29, 18, 21, 15, 0, 0, 0, 7, 42, 52, 85, 91, 103, 126, 153, 128, 124, 82, 57, 52, 52, 24, 1, 0, 0, 0, 2, 17, 41, 67, 84, 100, 122, 136, 159, 127, 78, 69, 60, 50, 47, 25, 7, 1, 0, 0, 0, 34, 33, 66, 82, 113, 138, 149, 168, 175, 82, 142, 133, 70, 62, 41, 25, 6, 0, 0, 0, 18, 39, 55, 113, 111, 137, 141, 139, 141, 128, 102, 130, 90, 96, 65, 37, 0, 0, 0, 2, 15, 27, 71, 104, 129, 129, 158, 140, 154, 146, 150, 131, 92, 100, 67, 26, 3, 0, 0, 0, 0, 46, 73, 104, 124, 145, 135, 122, 107, 120, 122, 101, 98, 96, 35, 38, 7, 2, 0, 0, 0, 50, 58, 91, 124, 127, 139, 118, 121, 177, 156, 88, 90, 88, 28, 43, 3, 0, 0, 0, 0, 30, 62, 68, 91, 83, 117, 89, 139, 139, 99, 105, 77, 32, 1, 1, 0, 0, 0, 0, 0, 16, 21, 8, 45, 101, 125, 118, 87, 110, 86, 64, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 28, 79, 79, 117, 122, 88, 84, 54, 46, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 6, 55, 61, 68, 71, 30, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 23, 25, 20, 12, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12, 9, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0]

  var data = bctx.createImageData(20, 20)
  var d = data.data

  for (var i = 0; i < d.length; i += 4) {
    d[i] = color[0]
    d[i + 1] = color[1]
    d[i + 2] = color[2]
    d[i + 3] = opacities[i / 4]
  }

  bctx.putImageData(data, 0, 0)

  var imagewidth = 20 * 5
  var imageheight = 20 * 5

  function particle(x, y, l) {
    this.x = x
    this.y = y
    this.age = 0
    this.vx = (Math.random() * 8 - 4) / 100
    this.startvy = -(Math.random() * 30 + 10) / 100
    this.vy = this.startvy
    this.scale = Math.random() * .5
    this.lifetime = Math.random() * l + l / 2
    this.finalscale = 5 + this.scale + Math.random()

    this.update = function(deltatime) {
      this.x += this.vx * deltatime
      this.y += this.vy * deltatime
      var frac = Math.pow((this.age) / this.lifetime, .5)
      this.vy = (1 - frac) * this.startvy
      this.age += deltatime
      this.scale = frac * this.finalscale
    }

    this.draw = function() {
      context.globalAlpha = (1 - Math.abs(1 - 2 * (this.age) / this.lifetime)) / 8
      var off = this.scale * imagewidth / 2
      var xmin = this.x - off
      var xmax = xmin + this.scale * imageheight
      var ymin = this.y - off
      var ymax = ymin + this.scale * imageheight
      context.drawImage(buffer, xmin, ymin, xmax - xmin, ymax - ymin)
    }
  }


  function addparticles(x, y, n, lifetime) {
    lifetime = lifetime || 4000
    n = n || 10
    if (n < 1) return Math.random() <= n && pendingparticles.push(new particle(x, y, lifetime));
    for (var i = 0; i < n; i++) {
      pendingparticles.push(new particle(x, y, lifetime))
    };
  }

  function updateanddrawparticles(deltatime) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    deltatime = deltatime || 16
    var newparticles = []
    currentparticles = currentparticles.concat(pendingparticles)
    pendingparticles = []

    currentparticles.forEach(function(p) {
      p.update(deltatime)
      if (p.age < p.lifetime) {
        p.draw()
        newparticles.push(p)
      }
    })
    currentparticles = newparticles
  }

  function frame(time) {
    if (running) {
      var deltat = time - lastframe
      lastframe = time;

      updateanddrawparticles(deltat)

      polyfillAnimFrame(frame)
    }
  }

  var running = false

  function start() {
    running = true
    polyfillAnimFrame(function(time) {
      lastframe = time
      polyfillAnimFrame(frame)
    })
  }

  function stop() {
    running = false
  }

  return {
    start: start,
    stop: stop,
    step: updateanddrawparticles,
    addsmoke: addparticles
  }

}


var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight

var party = smokemachine(ctx, [54, 16.8, 18.2])
party.start() // start animating

onmousemove = function(e) {
  var x = e.clientX
  var y = e.clientY
  var n = .5
  var t = Math.floor(Math.random() * 200) + 3800
  party.addsmoke(x, y, n, t)
}

setInterval(function() {
  party.addsmoke(innerWidth / 2, innerHeight, 1)
}, 100)

html,
body {
  position: absolute;
  margin: 0;
  width: 100%;
}

#hi {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}

#hi a {
  color: #fff;
  font-size: 80px;
  text-decoration: none;
  font-family: Lobster;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <ul>
      <li>
        <a href="#" class="current" id="option-home">
          <span data-text="Home" data-target="#carouselExampleIndicators" data-slide-to="0">Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="About" data-target="#carouselExampleIndicators" data- slide-to="1">About</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Chronic Menu" data-target="#carouselExampleIndicators" data-slide-to="2">Chronic Menu</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Strains" data-target="#carouselExampleIndicators" data- slide-to="3">Strains</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Gallery" data-target="#carouselExampleIndicators" data- slide-to="4">Gallery</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Reviews" data-target="#carouselExampleIndicators" data- slide-to="5">Reviews</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<div style="margin-top:300px;position:absolute;"><a href="#">Link for testing</a></div>

<canvas id="canvas" width="1777" height="898" style="position:relative;"></canvas>

关于javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53713627/

文章推荐： css - 在 IE7 中，我包含的 div 不会扩展到该 div 的内容

文章推荐： css - 关闭和打开 CSS 属性会改变外观

文章推荐： javascript - 使用 jQuery 和 css 的下拉菜单

按钮
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
javascript - “给我发推文”按钮 - JavaScript 按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
javascript - html - <输入类型=按钮> 和 <按钮>
我试图在我的文本区域中获取一个按钮值，如果我使用则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
c# - 如何根据调用方法的调用(按钮)发送者(按钮#)操作变量名称？
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
javascript - 隐藏 'Clear' 按钮，直到单击 'Apply' 按钮
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。下面的代码(如果我的表有的话):
javascript - 我有一个 Excel 按钮，我想在数据表中添加 pdf 按钮
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
php - 在我的网站中开发“点赞”按钮，而不是添加 Facebook“点赞”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
java - 在 JSF2 中呈现 HTML5 按钮(按钮、重置和提交)
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素或如果您需要内容，请使用元素(不是空元素)。在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
android - 如何使用 ActionDone 按钮(不带 Enter 按钮)实现多行 EditText
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
android - 如何禁用 EditText 软件键盘上的 "Next"按钮(替换为 "Done"按钮)
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
java - 无法以编程方式隐藏弧形菜单中的 fab 按钮。尝试了 upload.hide();无法弄清楚如何隐藏 fab 按钮
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
java - 有没有办法在 JOptionPane showInputDialog 中只有 OK 按钮(没有 CANCEL 按钮)？
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
java - 如何通过 Selenium 和 Java 单击“停用”按钮，然后单击“激活”按钮
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。案例1: Edit
JavaScript 按钮
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
android自定义控件(按钮)
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？