Skulpt增加自定义模块，通过import 文件名即可使用

张长长 发布于 1 月 20 日

1.Skulpt项目里的lib文件夹下新建js文件

const $builtinmodule = function () {

    // 获取画布容器
    const selector = Sk.TurtleGraphics?.target || 'turtle';
    const target = typeof selector === 'string' ? document.getElementById(selector) : selector;

    // 清除画布
    function clearCanvas() {
        while (target.firstChild) {
            target.removeChild(target.firstChild);
        }
    }

    // 插入图片，标签样式优先级高于less
    const appendImg = (target, url, styleAttrs) => {
        const img = new Image();
        img.src = url;
        if (styleAttrs) {
            img.style.width = styleAttrs.width;
            img.style.height = styleAttrs.height;
        }
        target.appendChild(img);
    };

    // 生成二维码
    function createdQRCode(value) {
        Sk.dependencies.qrcode.toDataURL(value, {
            width: 200,
            height: 200
        }).then(url => {
            appendImg(target, url);
        });
    }

    const newModule = {};
    const robotFunc = function ($gbl, $loc) {
        // robot实例化时执行的方法，可以理解为constructor里的方法
        appendImg(target, Sk.dependencies.tutu, {width: '200px', height: '200px'});
        
        // 可以理解为实例上挂的方法,可以挂很多
        $loc.makeqr = new Sk.builtin.func((self, value) => {
            // 清除画布
            clearCanvas();
            // 生成二维码
            createdQRCode(value.v);
        });
    };
    // 可以理解为 new Class();
    newModule.robot = Sk.misceval.buildClass(newModule, robotFunc, 'robot', []);

    return newModule;
};

export default $builtinmodule;