块替换精灵路径

Question

我正在使用 blockly 来创建我的程序。我已经从 this github location 分块下载，我正在尝试将分块图像路径从这个位置：https://blockly-demo.appspot.com/static/media/sprites.png 替换到这个（相对）位置：sprites.png。但我不知道该怎么做。

问题是：我在哪里可以设置这个路径？

这是我的页面代码（在 blockly 的根文件夹中）：

<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>Blockly Test</title>
    <script src="blockly_compressed.js"></script>
    <script src="javascript_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0;">
    <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
        // toolbox codes are here.
    </xml>
    <div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
    <div id="blocklyDiv" style="position: absolute;"></div>
    <script>
        var blocklyArea = document.getElementById('blocklyArea');
        var blocklyDiv = document.getElementById('blocklyDiv');
        var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox")});
        var onresize = function(e) {
            // Compute the absolute coordinates and dimensions of blocklyArea.
            var element = blocklyArea;
            var x = 0;
            var y = 0;
            do {
                x += element.offsetLeft;
                y += element.offsetTop;
                element = element.offsetParent;
            } while (element);
            // Position blocklyDiv over blocklyArea.
            blocklyDiv.style.left = x + 'px';
            blocklyDiv.style.top = y + 'px';
            blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
            blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
            Blockly.svgResize(workspace);
        };
        window.addEventListener('resize', onresize, false);
        onresize();
        Blockly.svgResize(workspace);
        //document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
    </script>
    <button id="generator" onclick="try { eval(Blockly.JavaScript.workspaceToCode(workspace)); } catch (e) { alert(e); }" style="position: absolute; margin: 25px; right: 0; width: 80px; height: 80px; border-radius: 50%; border: 5px solid teal; background: darkcyan; color: white; font-size: x-large; outline: none; cursor: pointer;">⯈</button>
</body>
</html>

抱歉英语不好。

Answer 1

您可以在块注入时更改媒体路径。在进行 Blockly.inject() 调用时参考 media option。

在你的情况下，你可以做类似的事情 -

var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox"), media: './'});

块替换精灵路径

Blockly replace sprites path

javascript

html

relative-path

blockly

google-blockly