Мой JS файл:Как изменить источник изображения на mouseover в Fabric.js?
(function() {
var canvas = this.__canvas = new fabric.Canvas('c', {
hoverCursor: 'pointer',
selection: false
});
fabric.Object.prototype.transparentCorners = false;
canvas.findTarget = (function(originalFn) {
return function() {
var target = originalFn.apply(this, arguments);
if (target) {
if (this._hoveredTarget !== target) {
canvas.fire('object:over', {target: target});
if (this._hoveredTarget) {
canvas.fire('object:out', {target: this._hoveredTarget});
}
this._hoveredTarget = target;
}
}
else if (this._hoveredTarget) {
canvas.fire('object:out', {target: this._hoveredTarget});
this._hoveredTarget = null;
}
return target;
};
})(canvas.findTarget);
canvas.on({
'object:over': function(e) {
if (e.target.name === 'Production') {
e.target.src = 'Resources/Shape/Production_Hover.svg';
canvas.renderAll.bind(canvas);
}
}
});
canvas.on('object:out', function(e) {
e.target.setFill('green');
canvas.renderAll();
});
var shapeImages = [
{
name: 'Director',
top: 120,
left: 545
},
{
name: 'script',
top: 297,
left: 575
},
{
name: 'Production',
top: 43,
left: 500
}
];
function imageDisplay() {
var currentImage = shapeImages[0];
fabric.Image.fromURL('Resources/Shape/' + currentImage.name + '.svg', function(img) {
img.set({
left: currentImage.left,
top: currentImage.top,
name: currentImage.name
});
img.perPixelTargetFind = true;
img.targetFindTolerance = 4;
img.hasControls = img.hasBorders = false;
img.lockMovementX = img.lockMovementY = true;
canvas.add(img);
});
shapeImages.shift();
if (typeof shapeImages[0] !== 'undefined') {
imageDisplay();
}
}
imageDisplay();
})();
Поскольку fabric.js использует объекты для изображений, я могу изменить его с помощью ID (С помощью document.getElementById) Так я хотел бы, если кто-то находит ничего плохого с кодом. выше .. В основном я пытаюсь изменить образ «Производство» на «Production_Hover.svg» при наведении курсора мыши.
Это то, что я пытаюсь построить: http://www.ismfilms.com/diagram/diagramAS3.swf
Я только начал, и достиг до производственной части ..
Это мой Индексный файл:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/fabric.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="c" height="700" width="1000"></canvas>
</div>
<script src="js/flash_conversion.js"></script>
</body>
</html>
Работает ли функция onload? –
@kangax Dude .. ты должен быть довольно хорош в этом праве? Помогите мне? –