请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

1
回复
381
查看
[复制链接]

46

主题

47

帖子

465

积分

 楼主| 2021-7-9 17:02:15 显示全部楼层 |阅读模式

现象描述

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


回复

使用道具 举报

23

主题

142

帖子

825

积分

2021-7-9 17:04:16 显示全部楼层

实现方法

【方法一】使用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>

实现效果如下:


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册