{"id":30765,"date":"2024-11-25T10:20:06","date_gmt":"2024-11-25T02:20:06","guid":{"rendered":"https:\/\/fwq.ai\/blog\/30765\/"},"modified":"2024-11-25T10:20:06","modified_gmt":"2024-11-25T02:20:06","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b9%8b%e5%88%bb%e5%ba%a6%e5%b0%ba%e6%bb%91%e5%9d%97%e9%80%89%e6%8b%a9%e6%89%93%e8%b5%8f%e9%87%91%e9%a2%9d%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/30765\/","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u523b\u5ea6\u5c3a\u6ed1\u5757\u9009\u62e9\u6253\u8d4f\u91d1\u989d\u529f\u80fd"},"content":{"rendered":"

\u6458\u8981: \u4e0e\u81ea\u5e26\u7684slider\u4e0d\u540c\u7684\u662f\uff0c\u5b83\u662f\u901a\u8fc7\u624b\u52bf\u6ed1\u52a8\u6807\u5c3a\u5f97\u5230\u53d6\u503c\uff0c\u800c\u4e0d\u662f\u901a\u8fc7\u6ed1\u52a8\u6ed1\u5757\u672c\u8eab\u3002
\n

\n\u6548\u679c\u56fe<\/strong>
\n

\n <\/p>\n

\u56fe\u7247\uff1a1.gif<\/p>\n

\"\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u523b\u5ea6\u5c3a\u6ed1\u5757\u9009\u62e9\u6253\u8d4f\u91d1\u989d\u529f\u80fd\u63d2\u56fe\"<\/span> <\/p>\n

\u573a\u666f<\/strong>
\n
\u5f53\u4e00\u5c4f\u663e\u793a\u4e0d\u4e0b\uff0c\u4f8b\u5982\u5e74\u9f84\u4f53\u91cd\u9009\u62e9\uff0c\u91d1\u989d\u9009\u62e9\u7b49\u5927\u533a\u95f4\u9700\u8981\u7684\u9009\u62e9\u5668\uff0c\u76f8\u6bd4\u81ea\u5e26\u7684picker\u8981\u76f4\u89c2\u4e00\u4e9b\u3002
\n

\n\u601d\u8def\uff1a<\/strong>
\n
\u5148\u753b\u4e00\u4e2ascrollView 2 \u88c5\u8fdbcanvas
\n
lineTo\u753b\u523b\u5ea6\u7ebf\u6bb5\uff0clineTo+fill\u753b\u51fa\u4e09\u89d2\u5f62\u6e38\u6807\uff0cfillText\u63cf\u7ed8\u6587\u672c\u6807\u7b7e
\n
\u901a\u8fc7bindscroll\u76d1\u542c\u523b\u5ea6\u5c3a\u89e6\u6478\u4e8b\u4ef6
\n
\u6e32\u67d3\u53d6\u503c\u5230\u9875\u9762
\n

\n\u57fa\u672c\u5e03\u5c40<\/strong> <\/p>\n

<scroll-view>  <canvas><\/canvas><\/scroll-view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
 
\n\u5b9e\u73b0bindscroll\u65b9\u6cd5<\/strong>
\n  <\/p>\n
bindscroll: function (e) {  \/\/ deltaX \u6c34\u5e73\u4f4d\u7f6e\u504f\u79fb\u4f4d\uff0c\u6bcf\u6b21\u6ed1\u52a8\u4e00\u6b21\u89e6\u53d1\u4e00\u6b21\uff0c\u6240\u4ee5\u9700\u8981\u8bb0\u5f55\u4ece\u7b2c\u4e00\u6b21\u89e6\u53d1\u6ed1\u52a8\u8d77\uff0c\u4e00\u5171\u6ed1\u52a8\u4e86\u591a\u5c11\u8ddd\u79bb\r\n  deltaX += e.detail.deltaX;\r\n  console.log(deltaX)}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
 
\n\u63cf\u7ed8\u523b\u5ea6<\/strong>
\n  <\/p>\n
const context = wx.createCanvasContext('canvas-ruler');\/\/ \u79fb\u52a8\u5230\u539f\u70b9context.moveTo(origion.x, origion.y);\/\/ \u753b\u7ebf\u5230\u523b\u5ea6\u9ad8\u5ea6context.lineTo(origion.x, origion.y - heightDecimal);\/\/ \u8bbe\u7f6e\u5c5e\u6027context.setLineWidth(1);\/\/ \u63cf\u7ebfcontext.stroke();\/\/ \u63cf\u7ed8\u6587\u672c\u6807\u7b7econtext.setFontSize(fontSize);context.fillText('0', origion.x - fontSize \/ 2, fontSize);context.draw();<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
 
\n\u904d\u5386\u523b\u5ea6<\/strong>
\n  <\/p>\n
for (var i = 0; i <br>\u5207\u8bb0\u8981\u8c03\u7528context.beginPath();<br><strong>\u63cf\u7ed8\u6e38\u6807<\/strong><br><pre class=\"brush:js;toolbar:false;\" >drawCursor: function () {    \/* \u5b9a\u4e49\u53d8\u91cf *\/    \/\/ \u5b9a\u4e49\u4e09\u89d2\u5f62\u9876\u70b9 TODO x    var center = {x: app.screenWidth \/ 2, y: 5};    \/\/ \u5b9a\u4e49\u4e09\u89d2\u5f62\u8fb9\u957f    var length = 20;    \/\/ \u5de6\u7aef\u70b9    var left = {x: center.x - length \/ 2, y: center.y + length \/ 2 * Math.sqrt(3)};    \/\/ \u53f3\u7aef\u70b9    var right = {x: center.x + length \/ 2, y: center.y + length \/ 2 * Math.sqrt(3)};    \/\/ \u521d\u59cb\u5316context    const context = wx.createCanvasContext('canvas-cursor');\r\n    context.moveTo(center.x, center.y);\r\n    context.lineTo(left.x, left.y);\r\n    context.lineTo(right.x, right.y);    \/\/ fill()\u586b\u5145\u800c\u4e0d\u662fstroke()\u63cf\u8fb9\uff0c\u4e8e\u662f\u7701\u53bb\u624b\u52a8\u56de\u5f52\u539f\u70b9\uff0ccontext.lineTo(center.x, center.y);\r\n    context.setFillStyle('#48c23d');\r\n    context.fill();\r\n    context.draw();  }<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
\u753b\u5e26\u4e00\u4e2a\u7eff\u8272\u7684\u6b63\u4e09\u89d2\u5f62\u4f5c\u4e3a\u6e38\u6807\uff0c\u6ce8\u610f\u6e38\u6807\u662f\u60ac\u6d6e\u4e0d\u52a8\u7684\uff0c\u6240\u4ee5\u53e6\u8d77\u4e00\u4e2acancas\u6765\u88c5\u5b83\u3002\u5f53\u7136\u5b83\u4e0d\u662f\u5fc5\u987b\u7684\uff0c\u5077\u4e2a\u61d2ps\u4e00\u5f20\u4e09\u89d2\u5f62\u7684png\u4ee3\u66ff\u4e5f\u65e0\u59a8\uff0c\u751a\u81f3\u523b\u5ea6\u5176\u5b9e\u4e5f\u53ef\u4ee5\u7528  \u52a0\u7edd\u5bf9\u5b9a\u4f4d\u6765\u751f\u6210\u7684\u3002
\n
 
\n\u5b9a\u4e49\u523b\u5ea6\u9ed8\u8ba4\u521d\u503c<\/strong>
\n  <\/p>\n
that.setData({\r\n    scrollLeft: (currentValue - minValue) * ratio});<scroll-view><\/scroll-view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
\u7ed1\u5b9ascroll-left\u53c2\u6570\uff0c\u76f8\u5f53\u4e8eiOS\u91cc\u4e86UIScrollView\u7684contentOffset\uff0c\u624b\u52a8\u8ba9\u504f\u79fb\u5230\u9ed8\u8ba4\u521d\u503c\u5bf9\u5e94\u7684\u5750\u6807\u4f4d\u7f6e\u3002
\n
 
\n\u9002\u914d\u6700\u5c0f\u503c<\/strong>
\n
\u5f53\u4e1a\u52a1\u573a\u666f\u9700\u8981\u505a\u6570\u636e\u9a8c\u8bc1\uff0c\u4f8b\u5982\u91d1\u989d\u8981>0\uff0c\u5e74\u9f84\u8981\u5927\u4e8e18\u5c81\u7b49\uff0c\u5c31\u5f97\u9002\u914d\u6781\u503c\u3002
\n  <\/p>\n
that.setData({\r\n    amount: Math.floor(- deltaX \/ 10 + minValue)});<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
 
\n\u540c\u65f6\u8981\u4fee\u6b63\u523b\u5ea6\u7ebf\u7684x\u8f74\u5750\u6807<\/strong>
\n  <\/p>\n
\/\/ 2.2 \u753b\u523b\u5ea6\u7ebfcontext.moveTo(origion.x + (i - minValue) * ratio, origion.y);\/\/ \u753b\u7ebf\u5230\u523b\u5ea6\u9ad8\u5ea6\uff0c10\u7684\u4f4d\u6570\u5c31\u52a0\u9ad8context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));\/\/ 2.3 \u63cf\u7ed8\u6587\u672c\u6807\u7b7econtext.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize \/ 2, fontSize);<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236
\n
 
\n\u6700\u7ec8js\u4ee3\u7801<\/strong>  
\n  <\/p>\n
var that;var deltaX = 0;var minValue = 1;var app = getApp();Page({\r\n  data: {\r\n    value: 0,\r\n    canvasHeight: 80  },\r\n  onLoad: function (options) {\r\n    that = this;    \/\/ \u7ed8\u5236\u6807\u5c3a\r\n    that.drawRuler();    \/\/ \u7ed8\u5236\u4e09\u89d2\u5f62\u6e38\u6807\r\n    that.drawCursor();  },\r\n  drawRuler: function() {    \/* 1.\u5b9a\u4e49\u53d8\u91cf *\/    \/\/ 1.1 \u5b9a\u4e49\u539f\u70b9\u4e0e\u7ec8\u70b9\uff0cx\u8f74\u65b9\u5411\u8d77\u70b9\u4e0e\u7ec8\u70b9\u5404\u7559\u534a\u5c4f\u7a7a\u767d    var origion = {x: app.screenWidth \/ 2, y: that.data.canvasHeight};    var end = {x: app.screenWidth \/ 2, y: that.data.canvasHeight};    \/\/ 1.2 \u5b9a\u4e49\u523b\u5ea6\u7ebf\u9ad8\u5ea6    var heightDecimal = 50;    var heightDigit = 25;    \/\/ 1.3 \u5b9a\u4e49\u6587\u672c\u6807\u7b7e\u5b57\u4f53\u5927\u5c0f    var fontSize = 20;    \/\/ 1.4 \u6700\u5c0f\u523b\u5ea6\u503c    \/\/ \u5df2\u7ecf\u5b9a\u4e49\u5728\u5168\u5c40\uff0c\u4fbf\u4e8ebindscroll\u8bbf\u95ee    \/\/ 1.5 \u603b\u523b\u5ea6\u503c    var maxValue = 200;    \/\/ 1.6 \u5f53\u524d\u523b\u5ea6\u503c    var currentValue = 20;    \/\/ 1.7 \u6bcf\u4e2a\u523b\u5ea6\u6240\u5360\u4f4d\u7684px    var ratio = 10;    \/\/ 1.8 \u753b\u5e03\u5bbd\u5ea6 var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;    \/\/ \u8bbe\u5b9ascroll-view\u521d\u59cb\u504f\u79fb\r\n    that.setData({\r\n      canvasWidth: canvasWidth,\r\n      scrollLeft: (currentValue - minValue) * ratio    });    \/* 2.\u7ed8\u5236 *\/    \/\/ 2.1\u521d\u59cb\u5316context    const context = wx.createCanvasContext('canvas-ruler');    \/\/ \u904d\u5386maxValue    for (var i = 0; i <\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236     <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e4b\u523b\u5ea6\u5c3a\u6ed1\u5757\u9009\u62e9\u6253\u8d4f\u91d1\u989d\u529f\u80fd \u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6458\u8981: \u4e0e\u81ea\u5e26\u7684slider\u4e0d\u540c\u7684\u662f\uff0c\u5b83\u662f\u901a\u8fc7\u624b\u52bf\u6ed1\u52a8\u6807\u5c3a\u5f97\u5230\u53d6\u503c\uff0c\u800c\u4e0d\u662f\u901a\u8fc7\u6ed1\u52a8\u6ed1\u5757\u672c\u8eab\u3002 \u6548\u679c\u56fe \u56fe\u7247\uff1a1.gif \u573a\u666f \u5f53\u4e00\u5c4f\u663e\u793a\u4e0d\u4e0b\uff0c\u4f8b\u5982\u5e74\u9f84\u4f53\u91cd\u9009\u62e9\uff0c\u91d1\u989d\u9009\u62e9\u7b49\u5927\u533a\u95f4\u9700\u8981\u7684\u9009\u62e9\u5668\uff0c\u76f8\u6bd4\u81ea\u5e26\u7684picker\u8981\u76f4\u89c2\u4e00\u4e9b\u3002 \u601d\u8def\uff1a \u5148\u753b\u4e00\u4e2ascrollView 2 \u88c5\u8fdbcanvas lineTo\u753b\u523b\u5ea6\u7ebf\u6bb5\uff0clineTo+fill\u753b\u51fa\u4e09\u89d2\u5f62\u6e38\u6807\uff0cfillText\u63cf\u7ed8\u6587\u672c\u6807\u7b7e \u901a\u8fc7bindscroll\u76d1\u542c\u523b\u5ea6\u5c3a\u89e6\u6478\u4e8b\u4ef6 \u6e32\u67d3\u53d6\u503c\u5230\u9875\u9762 \u57fa\u672c\u5e03\u5c40 <scroll-view>  <canvas><\/canvas><\/scroll-view> \u767b\u5f55\u540e\u590d\u5236 \u5b9e\u73b0bindscroll\u65b9\u6cd5 bindscroll: function (e) {  \/\/ deltaX \u6c34\u5e73\u4f4d\u7f6e\u504f\u79fb\u4f4d\uff0c\u6bcf\u6b21\u6ed1\u52a8\u4e00\u6b21\u89e6\u53d1\u4e00\u6b21\uff0c\u6240\u4ee5\u9700\u8981\u8bb0\u5f55\u4ece\u7b2c\u4e00\u6b21\u89e6\u53d1\u6ed1\u52a8\u8d77\uff0c\u4e00\u5171\u6ed1\u52a8\u4e86\u591a\u5c11\u8ddd\u79bb   deltaX += e.detail.deltaX;   console.log(deltaX)} \u767b\u5f55\u540e\u590d\u5236 \u63cf\u7ed8\u523b\u5ea6 const context = wx.createCanvasContext(‘canvas-ruler’);\/\/ \u79fb\u52a8\u5230\u539f\u70b9context.moveTo(origion.x, origion.y);\/\/ \u753b\u7ebf\u5230\u523b\u5ea6\u9ad8\u5ea6context.lineTo(origion.x, origion.y – heightDecimal);\/\/ \u8bbe\u7f6e\u5c5e\u6027context.setLineWidth(1);\/\/ \u63cf\u7ebfcontext.stroke();\/\/ \u63cf\u7ed8\u6587\u672c\u6807\u7b7econtext.setFontSize(fontSize);context.fillText(‘0’, origion.x – fontSize \/ 2, fontSize);context.draw(); \u767b\u5f55\u540e\u590d\u5236 \u904d\u5386\u523b\u5ea6 for (var i = 0; i <br>\u5207\u8bb0\u8981\u8c03\u7528context.beginPath();<br><strong>\u63cf\u7ed8\u6e38\u6807<\/strong><br><pre class=”brush:js;toolbar:false;” >drawCursor: function () {    \/* \u5b9a\u4e49\u53d8\u91cf *\/    \/\/ \u5b9a\u4e49\u4e09\u89d2\u5f62\u9876\u70b9 TODO x    var center = {x: app.screenWidth \/ 2, y: 5};    \/\/ \u5b9a\u4e49\u4e09\u89d2\u5f62\u8fb9\u957f    var length = 20;    \/\/ \u5de6\u7aef\u70b9    var left = {x: center.x – length \/ 2, y: center.y + length \/ 2 * Math.sqrt(3)};    \/\/ \u53f3\u7aef\u70b9    var right = {x: center.x + length \/ 2, y: center.y + length \/ 2 * Math.sqrt(3)};    \/\/ \u521d\u59cb\u5316context    const context = wx.createCanvasContext(‘canvas-cursor’);     context.moveTo(center.x, center.y);     context.lineTo(left.x, left.y);     context.lineTo(right.x, right.y);    \/\/ fill()\u586b\u5145\u800c\u4e0d\u662fstroke()\u63cf\u8fb9\uff0c\u4e8e\u662f\u7701\u53bb\u624b\u52a8\u56de\u5f52\u539f\u70b9\uff0ccontext.lineTo(center.x, center.y);     context.setFillStyle(‘#48c23d’);     context.fill();     context.draw();  } \u767b\u5f55\u540e\u590d\u5236 \u753b\u5e26\u4e00\u4e2a\u7eff\u8272\u7684\u6b63\u4e09\u89d2\u5f62\u4f5c\u4e3a\u6e38\u6807\uff0c\u6ce8\u610f\u6e38\u6807\u662f\u60ac\u6d6e\u4e0d\u52a8\u7684\uff0c\u6240\u4ee5\u53e6\u8d77\u4e00\u4e2acancas\u6765\u88c5\u5b83\u3002\u5f53\u7136\u5b83\u4e0d\u662f\u5fc5\u987b\u7684\uff0c\u5077\u4e2a\u61d2ps\u4e00\u5f20\u4e09\u89d2\u5f62\u7684png\u4ee3\u66ff\u4e5f\u65e0\u59a8\uff0c\u751a\u81f3\u523b\u5ea6\u5176\u5b9e\u4e5f\u53ef\u4ee5\u7528 \u52a0\u7edd\u5bf9\u5b9a\u4f4d\u6765\u751f\u6210\u7684\u3002 \u5b9a\u4e49\u523b\u5ea6\u9ed8\u8ba4\u521d\u503c that.setData({     scrollLeft: (currentValue – minValue) * ratio});<scroll-view><\/scroll-view> \u767b\u5f55\u540e\u590d\u5236 \u7ed1\u5b9ascroll-left\u53c2\u6570\uff0c\u76f8\u5f53\u4e8eiOS\u91cc\u4e86UIScrollView\u7684contentOffset\uff0c\u624b\u52a8\u8ba9\u504f\u79fb\u5230\u9ed8\u8ba4\u521d\u503c\u5bf9\u5e94\u7684\u5750\u6807\u4f4d\u7f6e\u3002 \u9002\u914d\u6700\u5c0f\u503c \u5f53\u4e1a\u52a1\u573a\u666f\u9700\u8981\u505a\u6570\u636e\u9a8c\u8bc1\uff0c\u4f8b\u5982\u91d1\u989d\u8981>0\uff0c\u5e74\u9f84\u8981\u5927\u4e8e18\u5c81\u7b49\uff0c\u5c31\u5f97\u9002\u914d\u6781\u503c\u3002 that.setData({     amount: Math.floor(- deltaX \/ 10 + minValue)}); \u767b\u5f55\u540e\u590d\u5236 \u540c\u65f6\u8981\u4fee\u6b63\u523b\u5ea6\u7ebf\u7684x\u8f74\u5750\u6807 \/\/ 2.2 \u753b\u523b\u5ea6\u7ebfcontext.moveTo(origion.x + (i – minValue) * ratio, origion.y);\/\/ \u753b\u7ebf\u5230\u523b\u5ea6\u9ad8\u5ea6\uff0c10\u7684\u4f4d\u6570\u5c31\u52a0\u9ad8context.lineTo(origion.x + (i – minValue) * ratio, origion.y – (i % ratio == 0 ? heightDecimal : heightDigit));\/\/ 2.3 \u63cf\u7ed8\u6587\u672c\u6807\u7b7econtext.fillText(i == 0 ? ‘ ‘ + i : i, origion.x + (i – minValue) * ratio – fontSize \/ 2, fontSize); \u767b\u5f55\u540e\u590d\u5236 \u6700\u7ec8js\u4ee3\u7801   var that;var deltaX = 0;var minValue = 1;var app = getApp();Page({   data: {     value: 0, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-30765","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=30765"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30765\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}