I have a custom widget that consist of an image and map which is used to create interactivity on the image, the problem is inside my afterRender function I bind the plugin to the image element like this
CodeafterRender: function (question, el) {
let imgBg = el.getElementsByTagName("img")[0];
let default_options = {
fillOpacity: 0.5,
render_highlight: {
fillColor: '2aff00',
stroke: true
},
render_select: {
fillColor: 'ff000c',
stroke: false
},
mouseoutDelay: 0,
fadeInterval: 30,
isSelectable: true,
singleSelect: false,
mapKey: 'state',
mapValue: 'full',
listKey: 'name',
listSelectedAttribute: 'checked',
sortList: 'asc',
//onGetList: addCheckBoxes,
//onConfigured: mapsterConfigured,
showToolTip: false,
toolTipClose: ['area-mouseout']
};
$(imgBg).pictarea({
normal: {
fillStyle: 'rgba(255,255,255,.4)',
strokeStyle: 'rgba(255,255,255,.8)',
lineWidth: 1
},
hover: {
fillStyle: 'rgba(255,255,255,.6)',
strokeStyle: '#fff',
lineWidth: 2,
shadowColor: '#fff',
shadowBlur: 10
},
active: {
fillStyle: 'rgba(255,255,255,.8)',
strokeStyle: '#f00',
lineWidth: 2
},
disabled: {
fillStyle: 'rgba(0,0,0,.4)',
strokeStyle: 'transparent'
}
});
},
however this does not work as it only displays the image without any interactivity but if I do this outside of surveyJs (i.e on page load), it works as expected. I have tried this with 2 different plugins but it's the same result.
Kindly assist
Hello,
I would appreciate it if you could share a complete demo so that I can research it on my end.
Thanks
please find attached the necessary files to recreate