块的渲染
core\block_render_svg.js
工程中的块都是一开始规定好样式的,且是有限个数的,没有提供可以自定义形状的功能
首先需要掌握svg绘制的命令符号使用 主要是path路径
命令 | 含义 |
---|---|
M | 绘制点移动到 moveTo (一段路径的绘制必须是先moveTo才可以lineTo) M x y |
L | 点移动到 lineTo L x y |
H | 水平移动点 偏移 绘制平行线 |
V | 垂直移动点 偏移 绘制垂直线 |
C | 曲线点移动 三次贝塞尔 c 控制点1 控制点2 终点3 曲线的起始点由前面绘制命令决定 |
S | 三次贝塞尔 如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。 |
Q | 贝塞尔曲线 二次 |
T | 贝塞尔曲线 二次 T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。 |
A | 绘制圆弧 多种情况 |
Z | closePath 结束绘制 |
M 100 350 L 150 -300 = (100,350)-- (150,-300)
M 100 350 l 150 -300 = (100,350)-- (250,50) 小写表示在前一个点上进行偏移
源码
Blockly.BlockSvg.START_HAT_HEIGHT = 15;
/**
* 块 上方的曲线
* Path of the top hat's curve.
* @const
*/
Blockly.BlockSvg.START_HAT_PATH = 'c 30,-' +
Blockly.BlockSvg.START_HAT_HEIGHT + ' 70,-' +
Blockly.BlockSvg.START_HAT_HEIGHT + ' 100,0';
加上 m 8,0 的时候绘制得到的形状
Blockly.BlockSvg.TAB_WIDTH = 8;
/**
* 从上到下绘制水平拼图选项卡的SVG路径。
* SVG path for drawing a horizontal puzzle tab from top to bottom.
* @const
*/
Blockly.BlockSvg.TAB_PATH_DOWN = 'v 5 c 0,10 -' + Blockly.BlockSvg.TAB_WIDTH +
',-8 -' + Blockly.BlockSvg.TAB_WIDTH + ',7.5 s ' +
Blockly.BlockSvg.TAB_WIDTH + ',-2.5 ' + Blockly.BlockSvg.TAB_WIDTH + ',7.5';
比如not块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- svg渲染块时 分为三个path组成 分别使dark模式的 默认模式 light模式 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- data-id 生成的源码在util.js genUid中
由 20个随机字符组成 -->
<g xmlns="http://www.w3.org/2000/svg" data-id="Q*?`b($N=1x.O/NlMwfi" class="blocklyDraggable" transform="translate(87.92968749999997,112.50781249999989)">
<!-- (8,0)(58) -->
<path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d=" m 8,0 h 49.989990234375 v 5 H 57.989990234375 V 5 H 57.989990234375 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 0 H 57.989990234375 V 20 V 24 h -49.989990234375 H 8 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z "/>
<path class="blocklyPath" stroke="none" fill="#5b80a5" d=" m 8,0 h 49.989990234375 v 5 H 57.989990234375 V 5 H 57.989990234375 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 0 H 57.989990234375 V 20 V 24 h -49.989990234375 H 8 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z "/>
<path class="blocklyPathLight" stroke="#8ca6c0" d=" m 8,0 m 0.5,0.5 H 57.489990234375 H 57.489990234375 M 57.989990234375,5 m -5,14.3 l 3.68,-2.1 M 8.5,23.5 M 8.5,23.5 V 20 v -1.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 "/>
<g transform="translate(18,5)"><text class="blocklyText" y="13.09" dy="0" x="0">not</text></g>
</g>
</svg>
</body>
</html>
实际上每一个块都是由多个已经定义好的绘制命令合并而成的