此角色积木块拖动到其他角色上以共享积木块

最新推荐文章于 2023-01-25 17:22:05 发布

哇靠哇靠

最新推荐文章于 2023-01-25 17:22:05 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39531373/article/details/87627886

本文详细介绍了在Scratch中优化角色间积木块共享机制的过程，包括自定义逻辑、代码修改及bug修复。通过添加和调整关键代码，实现了积木块在不同角色间的灵活共享，同时解决了复制后积木块位置混乱的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己大改了，与源码交互逻辑不同，不具备参考作用！
0.先设置一个字段，用于判断是否悬浮在非源角色上

componentWillReceiveProps (nextProps) {
        const {
            hoveredTarget,
            editingTarget,
            sprites,
            stage
        } = nextProps;

        // @zpt20190214角色间共享代码

        Blocks.isSpriteArea = (hoveredTarget.sprite &&
            hoveredTarget.sprite !== editingTarget);

1.scratch-vm/src/engine/blocks中：
**角色间共享代码，屏蔽掉isOutside区域，是因为只有在isOutside区域内，才会触发共享的积木块，因为我自己左右调换了，所以把此条件屏蔽，以实现在删除区也可以实现共享积木块。
20190318更新，后发现不用屏蔽此处也能正常获取共享积木块 **

case 'endDrag':
            // console.log(optRuntime.zptIsDragOverOnReceivedSprite)
            if (optRuntime) {
                optRuntime.emitBlockDragUpdate(false /* areBlocksOverGui */);

                // Drag blocks onto another sprite
                // if (e.isOutside) {
                //     const newBlocks = adapter(e);
                //     optRuntime.emitBlockEndDrag(newBlocks);
                // }
                // 角色间共享代码，屏蔽掉isOutside区域，是因为只有在isOutside区域内，才会触发共享的积木块，因为我自己左右调换了，所以把此条件屏蔽，以实现在删除区也可以实现共享积木块。
               **20190318更新，后发现不用屏蔽此处也能正常获取共享积木块**
                // if (e.isOutside) {
                    const newBlocks = adapter(e);
                    optRuntime.emitBlockEndDrag(newBlocks);
                // }
            }
            break;

2.scratch-blocks/blockly_compressed_vertical.js
在blockly_compressed_vertical.js文件中添加关键字Blockly.isSpriteArea，表示是否悬浮在非源角色的其他角色上面。
源码表示只有在isOutside区域内才会提取需要共享的积木块，由于我的修改，所以添加一个判断条件，如果悬浮在其他角色上面也会触发提取积木块事件。

Blockly.Events.EndBlockDrag = function(a, b) {
    if (a) {
        Blockly.Events.EndBlockDrag.superClass_.constructor.call(this, a);
        // if (this.isOutside = b) this.xml = Blockly.Xml.blockToDom(a, !0);
        // @zpt20190214角色间共享代码
        if (this.isOutside = b||Blockly.isSpriteArea) this.xml = Blockly.Xml.blockToDom(a, !0)
        this.recordUndo = !1
    }
};

3.scratch-blocks/blockly_compressed_vertical.js
添加条件如果悬浮在其他角色上，不删除积木块

(!Blockly.isSpriteArea)&&this.maybeDeleteBlock_() || ( this.draggingBlock_.moveConnections_(c.x, c.y),
    this.draggingBlock_.setDragging(!1),
    this.draggedConnectionManager_.applyConnections(),
    this.draggingBlock_.render(),
    this.fireMoveEvent_(),
    this.draggingBlock_.scheduleSnapAndBump());

4.src/xx-containers/xx-target-pane,jsx
这里原来有一个bug，就是复制后未删除的积木块弹回来的位置很乱，有时会到不可见区域，所以添加两个方法。
对workspace上的所有积木块进行整理排序；

this.ScratchBlocks.getMainWorkspace().cleanUp();

所有计算所有积木块的边界，然后居中，如果不排序的画会出现一左一右离得很远，强制居中后，啥都看不见。

 this.ScratchBlocks.getMainWorkspace().scrollCenter();

至此解决bug

  handleBlockDragEnd (blocks) {

        if (this.props.hoveredTarget.sprite && this.props.hoveredTarget.sprite !== this.props.editingTarget) {
            this.props.vm.shareBlocksToTarget(blocks, this.props.hoveredTarget.sprite, this.props.editingTarget);
            this.props.onReceivedBlocks(true);
            // console.log(this.ScratchBlocks);
          
            // 对积木块进行排序
            this.ScratchBlocks.getMainWorkspace().cleanUp();
            this.ScratchBlocks.getMainWorkspace().scrollCenter();
        }
    }