Bipes-Blockly项目二次开发/海龟编程（六）

Bipes-Blockly项目二次开发/海龟编程（六）

海龟编程，之前是有出过一期blog.csdn.net/weixin_4485… ，这次我将这个功能加到项目里面，前端python还是用skulpt.js。接下看我操作。 项目地址：maxuecan.github.io/Bipes/index…

第一：配置

配置加了新模式，海龟编程。选择海龟编程后，运行按钮，将会运行海龟画图功能。 skulpt-controller代码改动

// 新增画图输出
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'draw-canvas'
window.Sk.TurtleGraphics.width = 600
window.Sk.TurtleGraphics.height = 600

// 新增运行海龟函数
runSkulptCode() {
        let code = Code.generateCode()
        let myPromise = this.sk.misceval.asyncToPromise(() => {
            return this.sk.importMainWithBody("<stdin>", false, code, true);
        })

        myPromise
            .then((res) => {})
            .catch((err) => {})
}

第二：静态页面

<div class="draw-preview">
    <div class="draw-header">
      <span class="draw-header-left">海龟图</span>
      <div class="header-right">
        <img class="draw-close" src="./media/new-icon/close.png" title="关闭海龟">
      </div>
    </div>
    <div class="draw-content">
      <div id="draw-canvas" style="width: 600px; height: 600px;"></div>
    </div>
</div>

第三：js引用

import Common from "./common";
import EventEmitterController from '../utils/event-emitter-controller'
import DragController from '../utils/drag-controller'

export default class DrawPreview extends Common {
    constructor() {
        super()
        // 创建拖拽容器
        this.element = new DragController(
            document.getElementsByClassName('draw-preview')[0],
            {
                minWidth: 400,
                minHeight: 400,
                maxWidth: 600,
                maxHeight: 600
            },
            'draw',
            (params) => {
                let { newWidth, newHeight } = params
                $('#draw-canvas').css({
                    width: newWidth + 'px',
                    height: newHeight - 52 + 'px'
                })
                window.Sk.TurtleGraphics.width = newWidth
                window.Sk.TurtleGraphics.height = newHeight - 52
                // console.log(params)
            }
        )

        this.state = false

        EventEmitterController.on('draw-preview-change', (state) => {
            this.changeCode(state)
        })
    }
    initEvent() {
        $('.draw-close').on('click', () => {
            this.changeCode(false)
        })
    }
    // 显示隐藏预览区
    changeCode(state) {
        $('.draw-preview').css('visibility', (state ? 'visible' : 'hidden'))
        this.state = state
    }
}

第四：效果

总结

这期的改动的代码也不多，不过现在项目会存在功能相互矛盾的地方，后期打算规划一下，让对应模式下，显示对应的功能模块。海龟编程其实也是挺有意思的，后期也打算出一些demo案例，放在目录里面。