乐趣区

关于javascript:Skulpt自编库

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;
退出移动版