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老兄..你一定很擅长这个权利？ 帮帮我吗？ –