Results the preview

Here is a snippet of wechat codeDevelopers.weixin.qq.com/s/HSJqczme7…Direct screenshots In the code

Wrap text

// Data structure
{
        type: "text".x: 10.y: 360.width: 340.fontSize: "14px".lineHeight: "18px".fontColor: "# 000000".text: "A let's put in too much text and let's test and see if it wraps and let's see if it wraps"
}

/ * * *@description: Basic painting text *@param {*} CTX Canvas context *@param {*} Rect parameter object * {// basic format * fontSize fontSize * fontColor fontColor * text text * x,t,width, height// basic properties *} *@return {*}* /
export function fontRext(ctx, rect) {
  ctx.save();
  ctx.font = `${rect.fontSize || "14px"} Microsoft YaHei`;
  ctx.fillStyle = rect.fontColor || "# 000000";
  ctx.textAlign = "left";
  ctx.textBaseline = "top"; ctx.fillText(rect.text, rect.x, rect.y); ctx.restore(); } data processingfunction drawText(rect) {
        const newRect = JSON.parse(JSON.stringify(rect));
        let textWidth = 0; // Cumulative width
        let substringIndex = 0; // Intercept the position

        for (let index = 0; index < rect.text.length; index++) {
          const element = rect.text[index];

          // Get the height of the font
          textWidth += element.charCodeAt(0) > 255 ? parseInt(rect.fontSize) : Math.ceil(ctx.measureText(element).width);
          //ctx.measureText(element).width
          // textWidth += 14;
          // The cumulative font width is greater than the text width
          if (textWidth > (rect.width || option.width)) {
            // Draw the cut field
            newRect.text = rect.text.substring(substringIndex, index);
            fontRext(ctx, newRect);

            // Set the start subscript and pivot y
            substringIndex = index;
            textWidth = 0;
            // Calculate the spacing of each line
            const lineHeight = parseInt(newRect.lineHeight || newRect.fontSize) - parseInt(newRect.fontSize);
            newRect.y = newRect.y + parseInt(newRect.fontSize) + lineHeight;
          }

          // The rest of the drawing
          if (index === rect.text.length - 1) {
            newRect.text = rect.text.substring(substringIndex, index + 1); fontRext(ctx, newRect); }}}Copy the code

Painting picture rounded corner picture


// Data structure
 {
        type: "image".x: 0.y: 0.width: 350.height: 350.img: "https://image.huayixh.com/commodity/Banner/ca031f4ab0134ceb9e6d3e081ecadcfc.jpg"
},
const Point = function (x, y) {
  return { x: x, y: y };
};
/ * * *@description: Round corners *@param {*} CTX Canvas context *@param {*} rect* {* round // Round size * x,t,width, height// Basic attributes *} *@return {*}* /
export function arcToRect(ctx, rect) {
  var ptA = Point(rect.x + rect.round, rect.y);
  var ptB = Point(rect.x + rect.width, rect.y);
  var ptC = Point(rect.x + rect.width, rect.y + rect.height);
  var ptD = Point(rect.x, rect.y + rect.height);
  var ptE = Point(rect.x, rect.y);
  ctx.beginPath();
  ctx.moveTo(ptA.x, ptA.y);
  ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, rect.round);
  ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, rect.round);
  ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, rect.round);
  ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, rect.round);
  ctx.closePath();
}

/ * * *@description: Draw pictures *@param {*} CTX Canvas context *@param {*} rect* {* round // rounded * x,t,width, height// Basic attributes *} *@return {*}* /
export function imageRect(ctx, rect) {
  ctx.save();
  if (rect.round) {
    arcToRect(ctx, rect);
    ctx.clip();
  }
  ctx.drawImage(rect.img, 0.0, rect.img.width, rect.img.height, rect.x, rect.y, rect.width, rect.height);
  ctx.restore();
}

// draw the image data processing
function drawImgs(rect) {
        let poster = canvas.createImage(); // Create a picture object
        poster.src = rect.img;
        poster.onload = function () {
          // Listen for images to load
          rect.img = poster;
          imageRect(ctx, rect);

          // Check whether the picture is finished
          imageLength = imageLength - 1;
          if (imageLength === 0) {
            wx.canvasToTempFilePath({
              canvas: canvas,
              fileType: "jpg".success(res) {
                resolve(res.tempFilePath);
              },
              fail(err){ reject(err); }}); }}; }Copy the code