Curseur d'échelle pour le développement d'un mini-programme afin de sélectionner la fonction du montant de la récompense

Résumé : différent du curseur intégré, il obtient la valeur en faisant glisser la règle par des gestes, plutôt qu'en faisant glisser le curseur lui-même.
Rendu

Image : 1.gif

scène
Lorsqu'un écran ne peut pas s'adapter, comme la sélection de l'âge et du poids, la sélection du montant et d'autres sélecteurs nécessaires dans une large gamme, il est plus intuitif que le sélecteur intégré.
Idée :
Dessinez d'abord un scrollView 2 et chargez-le dans le canevas
lineTo dessine le segment d'échelle, lineTo+fill dessine le curseur triangulaire et fillText dessine l'étiquette de texte
Surveiller l'échelle via l'événement bindscroll Touch
Renvoyer la valeur à la page
Mise en page de base

<scroll-view scroll-x="true" bindscroll="bindscroll">  <canvas canvas-id="canvas" id="canvas"></canvas></scroll-view>

Implémenter la méthode bindscroll

bindscroll: function (e) {  // deltaX 水平位置偏移位，每次滑动一次触发一次，所以需要记录从第一次触发滑动起，一共滑动了多少距离
  deltaX += e.detail.deltaX;
  console.log(deltaX)}

Délimiter l'échelle

const context = wx.createCanvasContext('canvas-ruler');// 移动到原点context.moveTo(origion.x, origion.y);// 画线到刻度高度context.lineTo(origion.x, origion.y - heightDecimal);// 设置属性context.setLineWidth(1);// 描线context.stroke();// 描绘文本标签context.setFontSize(fontSize);context.fillText('0', origion.x - fontSize / 2, fontSize);context.draw();

Parcourir l'échelle

for (var i = 0; i <= maxValue; i++) {  // 开始一个路径，这条非常重要，否则会重复绘制之前的刻度n次，效果表现为页面加载很卡，lineWidth得到的线很粗
  context.beginPath();  // 绘制同上，不再赘述  ...  // 关闭一个路径，它是可选的，调用过了beginPath，不关闭也没有影响，保险起见，加上它
  context.closePath();}

N'oubliez pas d'appeler context.beginPath();
Dessinez le curseur

drawCursor: function () {    /* 定义变量 */    // 定义三角形顶点 TODO x    var center = {x: app.screenWidth / 2, y: 5};    // 定义三角形边长    var length = 20;    // 左端点    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 右端点    var right = {x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 初始化context    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()填充而不是stroke()描边，于是省去手动回归原点，context.lineTo(center.x, center.y);
    context.setFillStyle('#48c23d');
    context.fill();
    context.draw();  }

Dessinez un triangle équilatéral vert comme curseur. Notez que le curseur est suspendu, créez donc un autre cancas pour le maintenir. Bien sûr, ce n'est pas nécessaire. Cela ne fait pas de mal de Photoshop paresseusement avec un triangle png. Même l'échelle peut être générée en utilisant ae89cc1d5bca456c60a7b10985941a15
Définissez la valeur initiale par défaut de l'échelle

that.setData({
    scrollLeft: (currentValue - minValue) * ratio});<scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="pw_scrollLeft">

Liez le paramètre de défilement vers la gauche, qui est équivalent au contentOffset de UIScrollView dans iOS, et décalez-le manuellement par rapport au coordonnées correspondant à la valeur initiale par défaut Localisation.
Adaptez-vous à la valeur minimale
Lorsque le scénario commercial nécessite une vérification des données, par exemple, le montant doit être > 0, l'âge doit être supérieur à 18 ans, etc., vous il faut s'adapter à la valeur extrême.

that.setData({
    amount: Math.floor(- deltaX / 10 + minValue)});

Corrigez également la coordonnée sur l'axe x de la coche

// 2.2 画刻度线context.moveTo(origion.x + (i - minValue) * ratio, origion.y);// 画线到刻度高度，10的位数就加高context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));// 2.3 描绘文本标签context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);

Code js final

var that;var deltaX = 0;var minValue = 1;var app = getApp();Page({
  data: {
    value: 0,
    canvasHeight: 80  },
  onLoad: function (options) {
    that = this;    // 绘制标尺
    that.drawRuler();    // 绘制三角形游标
    that.drawCursor();  },
  drawRuler: function() {    /* 1.定义变量 */    // 1.1 定义原点与终点，x轴方向起点与终点各留半屏空白    var origion = {x: app.screenWidth / 2, y: that.data.canvasHeight};    var end = {x: app.screenWidth / 2, y: that.data.canvasHeight};    // 1.2 定义刻度线高度    var heightDecimal = 50;    var heightDigit = 25;    // 1.3 定义文本标签字体大小    var fontSize = 20;    // 1.4 最小刻度值    // 已经定义在全局，便于bindscroll访问    // 1.5 总刻度值    var maxValue = 200;    // 1.6 当前刻度值    var currentValue = 20;    // 1.7 每个刻度所占位的px    var ratio = 10;    // 1.8 画布宽度 var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;    // 设定scroll-view初始偏移
    that.setData({
      canvasWidth: canvasWidth,
      scrollLeft: (currentValue - minValue) * ratio    });    /* 2.绘制 */    // 2.1初始化context    const context = wx.createCanvasContext(&#39;canvas-ruler&#39;);    // 遍历maxValue    for (var i = 0; i <= maxValue; i++) {
      context.beginPath();      // 2.2 画刻度线
      context.moveTo(origion.x + (i - minValue) * ratio, origion.y);      // 画线到刻度高度，10的位数就加高
      context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));      // 设置属性
      context.setLineWidth(2);      // 10的位数就加深
      context.setStrokeStyle(i % ratio == 0 ? &#39;gray&#39; : &#39;darkgray&#39;);      // 描线
      context.stroke();      // 2.3 描绘文本标签
      context.setFillStyle(&#39;gray&#39;);      if (i % ratio == 0) {
        context.setFontSize(fontSize);        // 为零补一个空格，让它看起来2位数，页面更整齐
        context.fillText(i == 0 ? &#39; &#39; + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);      }
      context.closePath();    }    // 2.4 绘制到context
    context.draw();  },
  drawCursor: function () {    /* 定义变量 */// 定义三角形顶点 TODO x    var center = {x: app.screenWidth / 2, y: 5};    // 定义三角形边长    var length = 20;    // 左端点    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 右端点    var right = {x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 初始化context    const context = wx.createCanvasContext(&#39;canvas-cursor&#39;);
    context.moveTo(center.x, center.y);
    context.lineTo(left.x, left.y);
    context.lineTo(right.x, right.y);    // fill()填充而不是stroke()描边，于是省去手动回归原点，context.lineTo(center.x, center.y);
    context.setFillStyle(&#39;#48c23d&#39;);
    context.fill();
    context.draw();  },
  bindscroll: function (e) {    // deltaX 水平位置偏移位，每次滑动一次触发一次，所以需要记录从第一次触发滑动起，一共滑动了多少距离
    deltaX += e.detail.deltaX;    // 数据绑定
    that.setData({
      value: Math.floor(- deltaX / 10 + minValue)    });
    console.log(deltaX)  }});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!