0
我的JS文件：如何更改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」的圖像更改爲「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老兄..你一定很擅長這個權利？ 幫幫我嗎？ –