内容概要

在“积木开发系列----Blockly起步”中简单的Blockly的Workspace引入并显示到网页中。在这个代码中我们对Workspace做了简单的设定，包括简单样式以及Workspace的位置等等。这里说一说如何对Workspace进行一些更细节化的设定。

Workspace注入属性设定

想要在网页中显示Blockly你需要调用Blcokly的注入方法。例如：

var primaryWorkspace = Blockly.inject('div_1',//容器ID{//注入选项media: 'https://unpkg.com/blockly/media/',toolbox: document.getElementById('toolbox'),trashcan: true,});

这个Blockly.inject就是负责注入的函数，它返回Worksapce实例。该函数包含两个参数：容器的ID以及注入选项。这里定义了三个属性：媒体文件路径（media）；ToolBox对象（toolbox），以及是否需要回收箱（trashcan），这一段代码就得到这样的Workspace，如图：

与此同时，Blockly还为Workspace提供了丰富的斜细节配置：

名字	类型	描述
collapse:	布尔值	允许积木折叠或者扩展。如果工具箱具有类别，则默认为 true，否则为 false。
comments:	布尔值	允许积木有注释。如果工具箱具有类别，则默认为 true，否则为 false。
css:	布尔值	如果为 false，则不要注入 CSS，默认为true
disable:	布尔值	是否允许禁用Block，如果Toolbox有类别，则默认为true，否则为false
grid:	对象	配置Workspace的Grid
horizontalLayout:	布尔值	允许积木有注释。如果工具箱具有类别，则默认为 true，否则为 false。
maxBlocks:	数值	能被创建的最大的积木数量。对于学生练习很有用，默认值为Infinity。
maxInstances:	数值	从积木类型映射到可创建的该类型的最大的积木数量。未声明的类型则默认为 Infinity。
media:	字符串	媒体文件所在的路径或者链接。默认"https://blocklydemo.appspot.com/static/media/"。
move:	对象	配置用户如何在工作区域中移动的行为。
oneBasedIndex:	布尔值	如果为 true，则列表和字符串操作应该从 1 开始，如果为false，从0开始，默认为true
readOnly:	布尔值	如果为 true，则用户不能编辑。禁止使用工具箱和回收站，默认为false
rtl:	布尔值	是否启用RTL习惯，默认为false
scrollbars:	布尔值/对象	设置工作区域是否有垂直或者水平滚动条。
theme:	Blockly主题	如果没有其他主题，则为经典主题
toolbox:	XML/字符串/JSON	工具箱配置
toolboxPosition:	字符串	”start“则Toolbox在顶部或者居左的位置，”end“则toolbox在相反的位置
trashcan:	布尔值	是否有回收站，true为有，默认值为false，没有回收站
maxTrashcanContents:	数值	垃圾桶弹出按钮中显示的最大的已删除项目的数量。”0”是禁用该功能，默认为”32“
zoom:	对象	配置缩放行为
renderer:	字符串	渲染方式，包括：”geras”（默认）、”thrasos”和”zelos”
plugins:	对象	配置插件

以上是Workspace的注入属性选项。接下来我们来通过调整Workspace的注入属性一些代码来看看效果。

grid：网格设定

Blockly工作区是否支持网格由该属性决定，如果注入的时候没有提供该选项，工作区是空白的，反之则会按照配置显示网格。我们在原始的代码中加入网格设定，如下代码：

 var my_workspace = Blockly.inject('div_1',{media: 'https://unpkg.com/blockly/media/',toolbox: document.getElementById('toolbox'),trashcan: true,grid:{spacing: 20,length: 3,colour: '#ccc',snap: true,},});

添加了grid以后，工作区就有一片空白变成如下的样子：

网格设定中包含了四个属性：
spacing：间距，它定义了网格的点与点之间的间距，默认值是0，表示没有网格。下图是将间距分别设定为10，20，40的区别：

length ：长度，这个属性是定义点的形状的数字。0表示一个不可见的Grid，它的默认值是1，是一个小小的点，下图是将这个属性分别设定为1，5，20的区别：

colour：网格点的颜色设定，这个颜色和CSS的颜色是值是兼容的，包括：#f00、#ff0000或 rgb（255，0，0）默认值为#888，以下是不同颜色设定的时候对网格的影响：

snap：此属性设置为true的时候，Workspace会将被拖进来的Blcokly强制调整到最近的Grid上

zoom 缩放控制器以及属性设定

和其他绘图软件一样，如果你的工作区中有众多的Block，Blockly提供了缩放控制器，它可以缩放工作区。接下来，我们基于上面的代码，加入缩放设定：

 var my_workspace = Blockly.inject('div_1',{media: 'https://unpkg.com/blockly/media/',toolbox: document.getElementById('toolbox'),trashcan: true,grid:{spacing: 20,length: 3,colour: '#ccc',snap: true,},zoom:{controls: true,wheel:    true,startScale:1.0,maxScale:  3,minScale:  0.3,scaleSpeed: 1.2,pinch:true,}});

那么我们的工作区就会发生这样的变化：

控制器你可以通过下面的属性对它的形态以及控制行为进行设定：
controls：布尔类型的属性值，设置为 true 来显示缩放的中心、缩小、放大按钮。默认值为 false。
wheel：布尔类型的属性值，是否允许鼠标滚轮进行缩放。默认值为 false。
startScale：初始缩放比例。默认值是1.0
maxScale：最大缩放比例。表示最大缩放倍数。默认值是3.0
minScale：最小缩放比例。表示最小缩放倍数。默认值是0.3
scaleSpeed：缩放的执行速度
pinch：设置为 true 可以在触摸设备上启用“缩放”支持。如果wheel或者controls选项设置为 true则
默认值为 true。

move 移动Workspace

Blockly的主Worksapce是一个可以移动的区域，也就是说，我们看到的区域只是Worksapce的一部分，我们可以通过这三种方式来移动Worksapce：ScrollBar、鼠标或者鼠标滚轮。继续改造注入选项，添加移动方式定义：

var my_workspace = Blockly.inject('div_1',{media: 'https://unpkg.com/blockly/media/',toolbox: document.getElementById('toolbox'),trashcan: true,grid:{spacing: 20,length: 3,colour: '#ccc',snap: true,},zoom:{controls: true,wheel:    true,startScale:1.0,maxScale:  3,minScale:  0.3,scaleSpeed: 1.2,pinch:true,},move:{scrollbars: {horizontal: true, vertical: true,},drag: true,wheel: false,},});

这里这样运行该网页，你会发现Workspace变成这个样子：

在这个区域内，你也可以通过鼠标左键以拖动的方式来移动Workspace。以上的代码中，涉及了三个属性，分别是：
scrollbars：是一个由两个布尔值（horizontal和vertical）组成的对象，这个两个布尔值分别指示Workspace是否显示横向和纵向的滚动条。
drag：是否允许拖拽，
wheel：是否允许通过鼠标滚轮来实现Workspace的移动

theme：主题设定

Blockly提供了一套比较灵活的方式来修改Blockly的默认主题。接下来，我们将代码修改一下：

 Blockly.Themes.NewTheme = Blockly.Theme.defineTheme('halloween', {'base': Blockly.Themes.Classic,'categoryStyles': {'list_category': {'colour': "#4a148c"},'logic_category': {'colour': "#8b4513",},'loop_category': {'colour': "#85E21F",},'text_category': {'colour': "#FE9B13",}},'blockStyles': {'list_blocks': {'colourPrimary': "#4a148c",'colourSecondary':"#AD7BE9",'colourTertiary':"#CDB6E9"},'logic_blocks': {'colourPrimary': "#8b4513",'colourSecondary':"#ff0000",'colourTertiary':"#C5EAFF"}, 'loop_blocks': {'colourPrimary': "#85E21F",'colourSecondary':"#ff0000",'colourTertiary':"#C5EAFF"}, 'text_blocks': {'colourPrimary': "#FE9B13",'colourSecondary':"#ff0000",'colourTertiary':"#C5EAFF"} },'componentStyles': {'workspaceBackgroundColour': '#ff7518','toolboxBackgroundColour': '#F9C10E','toolboxForegroundColour': '#fff','flyoutBackgroundColour': '#252526','flyoutForegroundColour': '#ccc','flyoutOpacity': 1,'scrollbarColour': '#ff0000','insertionMarkerColour': '#fff','insertionMarkerOpacity': 0.3,'scrollbarOpacity': 0.4,'cursorColour': '#d0d0d0','blackBackground': '#333'}});var my_workspace = Blockly.inject('div_1',{media: 'https://unpkg.com/blockly/media/',toolbox: document.getElementById('toolbox'),trashcan: true,grid:{spacing: 20,length: 3,colour: '#ccc',snap: true,},zoom:{controls: true,wheel:    true,startScale:1.0,maxScale:  3,minScale:  0.3,scaleSpeed: 1.2,pinch:true,},move:{scrollbars: {horizontal: true, vertical: true,},drag: true,wheel: false,},theme:Blockly.Themes.NewTheme,});

这里定义了Blockly.Themes.NewTheme自定义主题，并通过“theme”选项注入到Workspace中，运行代码，界面将会变成：

在Blockly.Themes.NewTheme中：
base：指定的基础主题
categoryStyles：指定Toolbox每一个类别的主题
blockStyles：指定每一个积木的主题
componentStyles：指定整体主题设定

以上是一些比较常用的对象类型的属性的说明。剩余的会在扩展章节进行详解。

积木开发系列----Workspace的一些设定细节相关推荐

积木开发系列----Blockly初体验
介绍这一节将会使用Blockly来创建一个最基础的可视化编程环境.这个应用的网页将会包含一个目前Blockly支持的所有Block的Workspace.实时生成JavaScript代码.其中,Wor ...
云开发系列课程让你从入门到精通快速上手Serverless和云开发技术
简介:云开发系列课程主要介绍了从入门到精通快速上手Serverless和云开发技术.学习内容涵盖云开发协同.云函数.云数据库.多媒体托管.前后端一体化框架等Serverless Web开发必备知识.希 ...
今天你写控件了吗？----ASP.net控件开发系列
今天你写控件了吗?----ASP.net控件开发系列之开篇早段时间,同事之间很流行打CS,所以那段时间的问候变成了"今天你杀XX了吗?" 控件开发也许是程序员最能发掘自己创造力 ...
服务器开发系列（三）——Linux与Windows操作系统基础功能对比
系列文章目录服务器开发系列(一)--计算机硬件服务器开发系列(二)--Jetson Xavier NX 文章目录系列文章目录前言一.操作系统概述二.Linux和Windows的应用场景三 ...
iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook详解
代码改变世界 Posts - 69, Articles - 0, Comments - 812 Cnblogs Dashboard Login Home Contact Gallery RSS Ken ...
iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总
iOS开发系列--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook系统服务开发汇总 --系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如 ...
iOS开发系列–音频播放、录音、视频播放、拍照、视频录制
iOS开发系列–音频播放.录音.视频播放.拍照.视频录制 - KenshinCui - 博客园代码改变世界 Posts - 69, Articles - 0, Comments - 1004 Cnb ...
iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总，icloudpassbook
iOS开发系列--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook系统服务开发汇总,icloudpassbook --系统应用与系统服务 iOS开发过程中有时候难免会使用iOS ...
iOS开发系列--让你的应用“动”起来
概览在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

积木开发系列----Workspace的一些设定细节