Question

我的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）如果有人发现上面的代码有任何问题，我会很高兴。基本上我正试图改变＆＃34;生产＆＃34;到＆＃34; Production_Hover.svg＆＃34;在鼠标悬停上。

这是我想要建立的： 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>

Answer 1

我认为Fabric不支持鼠标悬停/鼠标移开，但这可能会有所帮助：http://fabricjs.com/hovering/

如何在Fabric.js中更改鼠标悬停时的图像源？

1 个答案: