背景
想要自定义块的形状结构
代码
主要是通过修改constants的值去调整块的形状
methods: {
CustomRenderer() {
class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {
constructor() {
// Set up all of the constants from the base provider.
super();
// Override a few properties.
/**
* The width of the notch used for previous and next connections.
* @type {number}
* @override
*/
this.NOTCH_WIDTH = 20;
/**
* The height of the notch used for previous and next connections.
* @type {number}
* @override
*/
this.NOTCH_HEIGHT = 10;
/**
* Rounded corner radius.
* @type {number}
* @override
*/
this.CORNER_RADIUS = 2;
/**
* The height of the puzzle tab used for input and output connections.
* @type {number}
* @override
*/
this.TAB_HEIGHT = 8;
}
}
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
/**
* @override
*/
makeConstants_() {
return new CustomConstantProvider();
}
}
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
},
initBlockly() {
Blockly.inject('content_blocks',
{
renderer: 'custom_renderer' // geras 是默认值
})
}
zelos 例子
如下可以提供修改参考
constructor() {
super();
// 网格单元
this.GRID_UNIT = 4;
/**
* @override
* 小padding
*/
this.SMALL_PADDING = this.GRID_UNIT;
/**
* @override
* 中 padding
*/
this.MEDIUM_PADDING = 2 * this.GRID_UNIT;
/**
* @override
* 中大型 padding
*/
this.MEDIUM_LARGE_PADDING = 3 * this.GRID_UNIT;
/**
* @override
* 大 padding
*/
this.LARGE_PADDING = 4 * this.GRID_UNIT;
/**
* @override
*/
this.CORNER_RADIUS = 1 * this.GRID_UNIT;
/**
* @override
*/
this.NOTCH_WIDTH = 9 * this.GRID_UNIT;
/**
* @override
*/
this.NOTCH_HEIGHT = 2 * this.GRID_UNIT;
/**
* @override
*/
this.NOTCH_OFFSET_LEFT = 3 * this.GRID_UNIT;
/**
* @override
*/
this.STATEMENT_INPUT_NOTCH_OFFSET = this.NOTCH_OFFSET_LEFT;
/**
* @override
*/
this.MIN_BLOCK_WIDTH = 2 * this.GRID_UNIT;
/**
* @override
*/
this.MIN_BLOCK_HEIGHT = 12 * this.GRID_UNIT;
/**
* @override
*/
this.EMPTY_STATEMENT_INPUT_HEIGHT = 6 * this.GRID_UNIT;
/**
* @override
*/
this.TAB_OFFSET_FROM_TOP = 0;
/**
* @override
*/
this.TOP_ROW_MIN_HEIGHT = this.CORNER_RADIUS;
/**
* @override
*/
this.TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT = this.LARGE_PADDING;
/**
* @override
*/
this.BOTTOM_ROW_MIN_HEIGHT = this.CORNER_RADIUS;
/**
* @override
*/
this.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT = 6 * this.GRID_UNIT;
/**
* @override
*/
this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT;
/**
* Minimum statement input spacer width.
* @type {number}
*/
this.STATEMENT_INPUT_SPACER_MIN_WIDTH = 40 * this.GRID_UNIT;
/**
* @override
*/
this.STATEMENT_INPUT_PADDING_LEFT = 4 * this.GRID_UNIT;
/**
* @override
*/
this.EMPTY_INLINE_INPUT_PADDING = 4 * this.GRID_UNIT;
/**
* @override
*/
this.EMPTY_INLINE_INPUT_HEIGHT = 8 * this.GRID_UNIT;
/**
* @override
*/
this.DUMMY_INPUT_MIN_HEIGHT = 8 * this.GRID_UNIT;
/**
* @override
*/
this.DUMMY_INPUT_SHADOW_MIN_HEIGHT = 6 * this.GRID_UNIT;
/**
* @override
*/
this.CURSOR_WS_WIDTH = 20 * this.GRID_UNIT;
/**
* @override
*/
this.CURSOR_COLOUR = '#ffa200';
/**
* Radius of the cursor for input and output connections.
* @type {number}
* @package
*/
this.CURSOR_RADIUS = 5;
/**
* @override
*/
this.JAGGED_TEETH_HEIGHT = 0;
/**
* @override
*/
this.JAGGED_TEETH_WIDTH = 0;
/**
* @override
*/
this.START_HAT_HEIGHT = 22;
/**
* @override
*/
this.START_HAT_WIDTH = 96;
/**
* @enum {number}
* @override
*/
this.SHAPES = {HEXAGONAL: 1, ROUND: 2, SQUARE: 3, PUZZLE: 4, NOTCH: 5};
/**
* Map of output/input shapes and the amount they should cause a block to be
* padded. Outer key is the outer shape, inner key is the inner shape.
* When a block with the outer shape contains an input block with the inner
* shape on its left or right edge, the block elements are aligned such that
* the padding specified is reached.
* @package
*/
this.SHAPE_IN_SHAPE_PADDING = {
1: {
// Outer shape: hexagon. 六边形
0: 5 * this.GRID_UNIT, // Field in hexagon.
1: 2 * this.GRID_UNIT, // Hexagon in hexagon.
2: 5 * this.GRID_UNIT, // Round in hexagon.
3: 5 * this.GRID_UNIT, // Square in hexagon.
},
2: {
// Outer shape: round. 圆形的
0: 3 * this.GRID_UNIT, // Field in round.
1: 3 * this.GRID_UNIT, // Hexagon in round.
2: 1 * this.GRID_UNIT, // Round in round.
3: 2 * this.GRID_UNIT, // Square in round.
},
3: {
// Outer shape: square. 正方形
0: 2 * this.GRID_UNIT, // Field in square.
1: 2 * this.GRID_UNIT, // Hexagon in square.
2: 2 * this.GRID_UNIT, // Round in square.
3: 2 * this.GRID_UNIT, // Square in square.
},
};
/**
* @override
*/
this.FULL_BLOCK_FIELDS = true;
/**
* @override
*/
this.FIELD_TEXT_FONTSIZE = 3 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_TEXT_FONTWEIGHT = 'bold';
/**
* @override
*/
this.FIELD_TEXT_FONTFAMILY =
'"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';
/**
* @override
*/
this.FIELD_BORDER_RECT_RADIUS = this.CORNER_RADIUS;
/**
* @override
*/
this.FIELD_BORDER_RECT_X_PADDING = 2 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_BORDER_RECT_Y_PADDING = 1.625 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true;
/**
* @override
*/
this.FIELD_DROPDOWN_COLOURED_DIV = true;
/**
* @override
*/
this.FIELD_DROPDOWN_SVG_ARROW = true;
/**
* @override
*/
this.FIELD_DROPDOWN_SVG_ARROW_PADDING = this.FIELD_BORDER_RECT_X_PADDING;
/**
* @override
*/
this.FIELD_TEXTINPUT_BOX_SHADOW = true;
/**
* @override
*/
this.FIELD_COLOUR_FULL_BLOCK = true;
/**
* @override
*/
this.FIELD_COLOUR_DEFAULT_WIDTH = 2 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_COLOUR_DEFAULT_HEIGHT = 4 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_CHECKBOX_X_OFFSET = 1 * this.GRID_UNIT;
/**
* The maximum width of a dynamic connection shape.
* @type {number}
*/
this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH = 12 * this.GRID_UNIT;
/**
* The selected glow colour.
* @type {string}
*/
this.SELECTED_GLOW_COLOUR = '#fff200';
/**
* The size of the selected glow.
* @type {number}
*/
this.SELECTED_GLOW_SIZE = 0.5;
/**
* The replacement glow colour.
* @type {string}
*/
this.REPLACEMENT_GLOW_COLOUR = '#fff200';
/**
* The size of the selected glow.
* @type {number}
*/
this.REPLACEMENT_GLOW_SIZE = 2;
/**
* The ID of the selected glow filter, or the empty string if no filter is
* set.
* @type {string}
* @package
*/
this.selectedGlowFilterId = '';
/**
* The <filter> element to use for a selected glow, or null if not set.
* @type {SVGElement}
* @private
*/
this.selectedGlowFilter_ = null;
/**
* The ID of the replacement glow filter, or the empty string if no filter
* is set.
* @type {string}
* @package
*/
this.replacementGlowFilterId = '';
/**
* The <filter> element to use for a replacement glow, or null if not set.
* @type {SVGElement}
* @private
*/
this.replacementGlowFilter_ = null;
/**
* The object containing information about the hexagon used for a boolean
* reporter block. Null before init is called.
* @type {Object}
*/
this.HEXAGONAL = null;
/**
* The object containing information about the hexagon used for a number or
* string reporter block. Null before init is called.
* @type {Object}
*/
this.ROUNDED = null;
/**
* The object containing information about the hexagon used for a
* rectangular reporter block. Null before init is called.
* @type {Object}
*/
this.SQUARED = null;
}
