# wxrank

**Repository Path**: xuyaomin/wxrank

## Basic Information

- **Project Name**: wxrank
- **Description**: 使用最新版 minigame-canvas-engine
增加图片九宫格支持, css 中 slice: '0,0,28,244'
增加缩放支持, css 中 scale: '0.8,0.8'
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-03-20
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README




引擎文档
https://docs.cocos.com/creator/3.8/manual/zh/editor/publish/build-open-data-context.html

快速入门
https://wechat-miniprogram.github.io/minigame-canvas-engine/overview/guide.html

在线编辑模板, 可以直接点 doT 导出
https://codepen.io/yuanzm/pen/QWZybox

生成模板, 如果用 https 访问会报错, 导致模板输入进去后没反应, 自己把 https 改成 http 就行了
https://olado.github.io/doT/index.html

模板可以使用 https://chatgpt.com/ 制作

字体可以用 bitmaptext, 但是不推荐 https://www.angelcode.com/products/bmfont/
renderImg
image.proto.render
微信排行榜里面也可以实现九宫格, 就是麻烦些

            // 自定义渲染逻辑 开始

            // ===
            const top = 0;
            const bottom = 0;
            const left = 28;
            const right = 244;
            const drawWidth = width;
            const drawHeight = height;
            const imgW = this.img.width;
            const imgH = this.img.height;

        
            // 计算原始九宫格区域
            const centerW = imgW - left - right;  // 中间部分宽度
            const centerH = imgH - top - bottom;  // 中间部分高度
        
            // 计算目标区域大小
            const targetCenterW = drawWidth - left - right;
            const targetCenterH = drawHeight - top - bottom;
        
            // Scale9 格式: 9 个区域 (left, center, right) x (top, middle, bottom)
            const parts = [
                // sx, sy, sw, sh, dx, dy, dw, dh
                // 左上角
                [0, 0, left, top, drawX, drawY, left, top],
                // 上边
                [left, 0, centerW, top, drawX + left, drawY, targetCenterW, top],
                // 右上角
                [imgW - right, 0, right, top, drawX + left + targetCenterW, drawY, right, top],
        
                // 左边
                [0, top, left, centerH, drawX, drawY + top, left, targetCenterH],
                // 中间
                [left, top, centerW, centerH, drawX + left, drawY + top, targetCenterW, targetCenterH],
                // 右边
                [imgW - right, top, right, centerH, drawX + left + targetCenterW, drawY + top, right, targetCenterH],
        
                // 左下角
                [0, imgH - bottom, left, bottom, drawX, drawY + top + targetCenterH, left, bottom],
                // 下边
                [left, imgH - bottom, centerW, bottom, drawX + left, drawY + top + targetCenterH, targetCenterW, bottom],
                // 右下角
                [imgW - right, imgH - bottom, right, bottom, drawX + left + targetCenterW, drawY + top + targetCenterH, right, bottom],
            ];
        
            // 绘制所有部分
            parts.forEach(([sx, sy, sw, sh, dx, dy, dw, dh]) => {
                ctx.drawImage(this.img, sx, sy, sw, sh, dx, dy, dw, dh);
            });


            // ===

            //ctx.drawImage(this.img, drawX - originX, drawY - originY, width, height);
            // 自定义渲染逻辑 结束