如何在快应用图标的右上角添加角标

奔跑的狮子

现象描述

很多应用图标的右上角部分可以覆盖一小段文字，用来吸引顾客，如下图。

行进的蜗牛

实现方法

【方法一】使用stack组件的堆叠效果层层堆叠实现。

用一张图片作为最底层，然后在上面用text组件覆盖实现，控制text的margin属性即可。

详细示例代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <stack class="stack">
      <div style="flex-direction: column;">
        <image class="img" src="/Common/3.jpg"></image>
        <text style="height: 60px;font-size: 40px;text-align: center;color: #000000;">快应用</text>
      </div>
      <text class="txt">立减4元</text>
    </stack>
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .stack {
    width: 100%;
    height: 400px;
    margin-left: 30px;
  }
  .img {
    width: 300px;
    height: 300px;
    margin-top: 5px;
  }
  .txt {
    color: white;
    width: 150px;
    height: 40px;
    text-align: center;
    margin-left: 200px;
    background-color: red;
    border-radius: 20px;
    font-size: 35px;
  }
</style>
<script>
  module.exports = {
    data: {
      componentData: {},
      value: '',
      display: true
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
  }
</script>

实现效果如下：

【方法二】用canvas来绘制实现。

1. 1.调用canvas的image和drawImage来绘制App图片。

2. 2.准备另一个canvas，调用fillText()方法在画布上绘制右上角的文字，通过toTempFilePath()方法生成图片，拿到返回的图片的uri。

3. 3.在第一个canvas中调用image和drawImage方法，把文字覆盖上去。

详细示例代码如下：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <canvas class="canvas" id="canvas"></canvas>
    <canvas show="{{display}}" class="canvas1" id="canvas1"></canvas>
  </div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .txt {
    color: white;
    width: 150px;
    height: 40px;
    text-align: center;
    margin-left: 200px;
    background-color: red;
    border-radius: 20px;
    font-size: 35px;
  }
  .canvas {
    width: 100%;
    height: 400px;
    margin-left: 30px;
  }
  .canvas1 {
    width: 150px;
    height: 40px;
    border-radius: 20px;
    background-color: red;
  }
</style>
<script>
  module.exports = {
    data: {
      componentData: {},
      value: '',
      display: true
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow(options) {
      '// Do something when show.'
      this.drawSmallPic();
      setTimeout(() => {
        this.drawBigPic()
        this.display = false
      }, 50);
},
//绘制大图
    drawBigPic() {
      var test = this.$element("canvas");
      var ctx = test.getContext("2d");
      var img = new Image();
      img.src = "/Common/3.jpg";
      img.onload = function () {
        console.log("图片加载完成");
        ctx.drawImage(img, 10, 10, 300, 300);
      }
      this.draw()
},
//绘制角标
    draw() {
      var test = this.$element("canvas");
      var ctx = test.getContext("2d");
      var img = new Image();
      img.src = this.src;
      img.onload = function () {
        console.log("图片加载完成");
        ctx.drawImage(img, 200, 0);
      }
},
//绘制角标上的文字，并转换成图片，返回图片的uri赋值给变量src
    drawSmallPic() {
      this.message = "drawfillStyleforcreatePattern";
      var test = this.$element("canvas1");
      var ctx = test.getContext("2d");
      ctx.font = "35px";
      ctx.fillText(" 立减4元", 0, 30);
      test.toTempFilePath({
        x: 0,
        y: 0,
        width: 150,
        height: 40,
        fileType: "png",
        quality: 1.0,
        success: (data) => {
          this.src = data.uri;
          console.log(`Canvas toTempFilePath success ${data.uri}`)
          console.log(`Canvas toTempFilePath success ${data.tempFilePath}`)
        },
        fail: (data) => {
          console.log('Canvas toTempFilePath data =' + data);
        },
        complete: () => {
          console.log('Canvas toTempFilePath complete.');
        }
      })
    }
  }
</script>

实现效果如下：