[英]how to add a click event in blockly's blocks?
I am working on blockly, I am having a scenario that I am having a block which is having an Image, I want to click on that Image and fire an event. 我正在按块进行工作,遇到一种情况,即我有一个具有图像的块,我想单击该图像并触发一个事件。 I am not sure how can I do that.
我不确定该怎么做。 I have tried blcokly's documentation but there is no such mention.
我已经尝试了blcokly的文档,但是没有提及。 they are only providing onchange event on whole block, while an Image will be only a part of that block.
它们仅在整个块上提供onchange事件,而Image只是该块的一部分。
Any Idea How can I achieve this? 任何想法我该如何实现?
Thanks in advance. 提前致谢。
I have got an idea to extend the field_image.js file, I have inherited the necessary files and in the init function I am adding an eventlistenr in the SVG element. 我有一个扩展field_image.js文件的想法,我继承了必要的文件,并在init函数中在SVG元素中添加了一个eventlistenr。 That's how I made image clickable.
这就是我使图像可点击的方式。 following is the code -
以下是代码-
MyFieldImage.prototype = new Blockly.FieldImage();
MyFieldImage.prototype.constructor = MyFieldImage;
function MyFieldImage(src, width, height, opt_alt,isClickListener){
this.clickEventListener = isClickListener;
this.sourceBlock_ = null;
// Ensure height and width are numbers. Strings are bad at math.
this.height_ = Number(height);
this.width_ = Number(width);
this.size_ = new goog.math.Size(this.width_,
this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
this.text_ = opt_alt || '';
this.setValue(src);
}
MyFieldImage.prototype.init = function(block) {
if (this.sourceBlock_) {
// Image has already been initialized once.
return;
}
this.sourceBlock_ = block;
// Build the DOM.
/** @type {SVGElement} */
this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
if (!this.visible_) {
this.fieldGroup_.style.display = 'none';
}
/** @type {SVGElement} */
this.imageElement_ = Blockly.createSvgElement('image',
{'height': this.height_ + 'px',
'width': this.width_ + 'px'}, this.fieldGroup_);
this.setValue(this.src_);
if (goog.userAgent.GECKO) {
/**
* Due to a Firefox bug which eats mouse events on image elements,
* a transparent rectangle needs to be placed on top of the image.
* @type {SVGElement}
*/
this.rectElement_ = Blockly.createSvgElement('rect',
{'height': this.height_ + 'px',
'width': this.width_ + 'px',
'fill-opacity': 0}, this.fieldGroup_);
}
block.getSvgRoot().appendChild(this.fieldGroup_);
// Configure the field to be transparent with respect to tooltips.
var topElement = this.rectElement_ || this.imageElement_;
topElement.tooltip = this.sourceBlock_;
Blockly.Tooltip.bindMouseEvents(topElement);
if(this.clickEventListener){
this.imageElement_.addEventListener("click", callingClick);
}
};
after this in the block you have to add myFieldImage instead of using fieldImage. 在此之后,您必须添加myFieldImage而不是使用fieldImage。 and isClickListener paramaeter will be passed from the block.
和isClickListener参数将从该块传递。 following is the code -
以下是代码-
Blockly.Blocks['MyBlock'] = {
init: function() {
this.appendDummyInput()
.appendField(new MyFieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*",true));
this.setTooltip('');
this.setHelpUrl('http://www.example.com/');
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.