scratch3.0舞台区如何绘制背景参考线

有网友私信我，舞台区网格线怎么绘制的，先给大家看下效果：

 这里把源码分享给大家，如果大家有什么问题，也可以关注私信，有问必答哈！

绘制背景线源码：

    /**
     * 绘制舞台参考线
     */
    showStageGrid () {
        const _stageGridWidth = parseInt(360 / window.scratchConfig.stageGrid.gridNum);
        let str = '<svg width="480px" height="360px" viewBox="0 0 480 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="#555" stroke-width="1">';
        for (let i = 0; i <= 480;) {
            str = `${str}<line x1="${i}" y1="0" x2="${i}" y2="480"></line>`;
            i += _stageGridWidth;
        }
        for (let i = 0; i <= 480;) {
            str = `${str}<line x1="0" y1="${i}" x2="480" y2="${i}"></line>`;
            i += _stageGridWidth;
        }
        str = `${str}</g></svg>`;
        const drawableID = this.props.vm.renderer.createDrawable('pen');
        const skinId = this.props.vm.renderer.createSVGSkin(str);
        this.props.vm.renderer.updateDrawableProperties(drawableID, {skinId});
        this.props.vm.renderer.draw();
    }

当然这里是根据全局配置的默认分割线比例，大家也可以根据自己的需要动态设置。

挂载划线代码：

    componentDidUpdate (prevProps) {
        if (this.props.isColorPicking && !prevProps.isColorPicking) {
            this.startColorPickingLoop();
        } else if (!this.props.isColorPicking && prevProps.isColorPicking) {
            this.stopColorPickingLoop();
        }
        this.updateRect();
        this.renderer.resize(this.rect.width, this.rect.height);

        if (prevProps.stageIsShowGrid) {
            this.showStageGrid();
        }
    }

文件位置：

src/container/stage.jsx

关于开关控制，先说下思路：

1，在gui顶层创建一个status状态；

2，在舞台工具栏创建复选状态按钮；

3，级联上报事件，改变是否显示分割线状态；

4，在传入到stage控制是否显示分割线；

舞台工具栏创建复选状态按钮源码：

<div>
    {/* 舞台是否显示网格线按钮 */}
    <Button
        className={classNames(
            styles.stageButton,
            styles.stageButtonFirst,
            (stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff
        )}
        onClick={() => {
            changeStageGrid(!stageIsShowGrid);
        }}
    >
        <img
            alt={props.intl.formatMessage(messages.smallStageSizeMessage)}
            className={styles.stageButtonIcon}
            draggable={false}
            src={stageIsShowGrid ? showGridIcon : hiddenGridIcon}
        />
    </Button>
</div>

文件位置：

src/components/stage-header/stage-header.jsx

全部源码都在上面了，有疑问的欢迎留言哦。