Blockly-2

最新推荐文章于 2023-11-22 16:15:14 发布

Aster_.

最新推荐文章于 2023-11-22 16:15:14 发布

阅读量195

点赞数

分类专栏： blockly 前端

本文链接：https://blog.csdn.net/qq_41604498/article/details/116023149

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

blockly

2 篇文章 0 订阅

订阅专栏

本文解析了SVG在工程中的块渲染原理，介绍了path命令在创建有限样式块中的应用，如M、L、H、V、C、S、Q和A等，并展示了如何通过实例理解不同命令组合。重点讲解了not块的SVG路径构成和核心代码段。

摘要由CSDN通过智能技术生成

块的渲染
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>

在这里插入图片描述

实际上每一个块都是由多个已经定义好的绘制命令合并而成的

Aster_.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Blockly-2

块的渲染core\block_render_svg.js工程中的块都是一开始规定好样式的，且是有限个数的，没有提供可以自定义形状的功能首先需要掌握svg绘制的命令符号使用主要是path路径命令含义M绘制点移动到 moveTo (一段路径的绘制必须是先moveTo才可以lineTo) M x yL点移动到 lineTo L x yH水平移动点偏移绘制平行线V垂直移动点偏移绘制垂直线C曲线点移动三次贝塞尔 c
复制链接

扫一扫

专栏目录