PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

Annual alipay “collection of five blessings” activities in the year before the line again, this year alipay launched the activity of writing blessings, complete the task can be collected. For so many years, although every year can only be divided into so pieces of eight hair, but the set of fu heat did not decrease a little, after all, the Chinese New Year also has no decent collective activities, especially this year and was left in the “Emperor” local Chinese New Year, with the set of five blessings this thing to remind yourself of a year!

The body of the

An idea popped into my head

After writing the fu word of pay treasure, oneself collected a piece of harmonious fu successfully. Finally, I also saved my fu character as wallpaper, not afraid of everyone’s joke, see the picture below (don’t spray me if it doesn’t look good) :

While appreciating this wallpaper, oneself have an idea: is this function good to realize? Can you handle it yourself?

Start DIY

With this idea, I began to conceive how to achieve this function, after all, we still have some ideas 💡, ha ha 😄. Let’s use VUE framework for the time being. Let’s get started!

Create a new VUE project

Create a new VUE project with VSCode, including the basic file and directory structure, as shown below:

A brief introduction to a project structure, including the build directory, contains the relevant code to build the project;

The config directory, which contains configuration information for the project, such as path, service port, etc.

Node_modules, which contains the third library that the project depends on;

The SRC directory, which contains all the source files for the project;

Static directory, static resource directory

Index.html, the entry file of the project home page;

Package. json, project configuration file.

The design canvas

Simply introduce an image as a canvas and define the “rewrite” and “finish” buttons as follows:

    <img
        v-if="showTian"
        src=".. /assets/tian.png"
        :style="{ width: this.canvasSize + 'px' }"
        class="zmiti-tian-img"
        ref="tian"
      />

      <div class="zmiti-btn-group" v-if="showBtnGroup">
        <div @click="rewrite"><img src=".. /assets/rewrite.png" /></div>
        <div @click="finish"><img src=".. /assets/done.png" /></div>
      </div>
Copy the code

Tian word canvas is as follows:

The override method is defined as follows:

    rewrite() {
      this.ctx.clearRect(0.0.this.canvasSize, this.canvasSize);
    },
Copy the code

The completion method is defined as follows:

    finished() {
        this.reelContext.save();
        this.reelContext.drawImage(
          this.ctx.canvas,
          this.viewW / 2 - this.canvasSize / 2,
          (3.2 * this.viewW) / 10
        );
        this.reelContext.restore();
    }
Copy the code

Design of the brush

Next, we began to design the brush, including the thickness of the brush, color, special effects, etc. The relevant codes are as follows:

    touchstart(e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;

      this.moveFlag = true;
      this.has = this.has || [];
      this.upof = this.getXY(e);
    },
    touchmove(e) {
      this.endX = e.changedTouches[0].pageX;
      this.endY = e.changedTouches[0].pageY;

      if (!this.moveFlag) return;
      var of = this.getXY(e);

      this.ctx.fillStyle = "Rgba (0,0,0,0.25)";
      var up = this.upof;
      var ur = this.radius;
      this.has.unshift({
        time: new Date().getTime(),
        dis: this.distance(up, of)});var dis = 0;
      var time = 0;
      for (var n = 0; n < this.has.length - 1; n++) {
        dis += this.has[n].dis;
        time += this.has[n].time - this.has[n + 1].time;
        if (dis > this.smoothness) break;
      }
      var or =
        Math.min(
          (time / dis) * this.linePressure + this.lineMin,
          this.lineMax
        ) / 2;
      this.radius = or;
      this.upof = of;
      if (this.has.length <= 1) return;
      var len = Math.round(this.has[0].dis / 2) + 1;
      for (var i = 0; i < len; i++) {
        var x = up.x + ((of.x - up.x) / len) * i;
        var y = up.y + ((of.y - up.y) / len) * i;
        var r = ur + ((or - ur) / len) * i;
        this.ctx.beginPath();
        this.ctx.arc(x, y, r / 2.0.2 * Math.PI, true);
        this.ctx.fill(); }},touchend() {
      this.moveFlag = false;
    },
    getXY(e) {
      var e = e.changedTouches[0];
      return {
        x:
          e.clientX -
          (this.viewW - this.canvasSize) / 2 +
          (document.body.scrollLeft || document.documentElement.scrollLeft),
        y:
          e.clientY -
          this.canvas.offsetTop +
          (document.body.scrollTop || document.documentElement.scrollTop),
      };
    },
    distance(a, b) {
      var x = b.x - a.x,
        y = b.y - a.y;
      return Math.sqrt(x * x + y * y);
    },
Copy the code

The effect of written “fu” is as follows:

At the end

Due to time constraints, the complete function has not been fully implemented, if any data can be double (such as the number of likes >9, or the number of comments >9, or the number of favorites >9), I will work overtime to complete the function, and put it on Github for the bosses to “point out the country”.

About the author: 😄 Hello everyone, MY name is Data-Mining (Liuzhen007). I am a typical audio and video technology enthusiast. I have worked for traditional broadcasting giants and audio and video Internet companies before and after, and I have rich experience in audio and video live broadcast and on-demand. Have a very deep understanding of WebRTC, FFmpeg and Electron, 😄 public account: Play with audio and video. Also CSDN blog expert, Huawei cloud sharing expert (co-create editor), InfoQ contract author, welcome to follow me to share more dry goods! 😄