Question

使用setSrc（）将选定的画布图像更改为较大的图像时，不会在新图像的位于原始较小图像的xy边界之外的区域上识别鼠标事件。

相反，当将选定的画布图像更改为较小的图像时，鼠标事件在新图像的外区域识别，直到原始的xy边界更大图片。

在任何一种情况下，一旦新图像确实接收到鼠标点击，事情就会恢复正常，整个图像会接收鼠标事件，不多也不少。此外，控件显示在正确的位置，但如上所述不可点击。

有没有办法纠正这种行为，只有完整的可见图像才能接收鼠标事件？

http://jsfiddle.net/kamakalama/0ng18cas/10/

HTML

<body>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <button id="butt">Change Image</button>
    <canvas style="border:1px solid silver;" width=500 height=400 id="c"></canvas>
</body>

的JavaScript

$(document).ready(function() { 

var canvas = new fabric.Canvas('c',{backgroundColor:"#ffffff"});
var bigImg="http://nonsuch30.com/yachtcards/images/cardbox-closed.jpg"
var smallImg="http://nonsuch30.com/yachtcards/images/woodcrafter-thumb.jpg"

    fabric.Image.fromURL(smallImg, function (img) {                        
    canvas.add(img);
    canvas.renderAll();
    img.setTransformMatrix([ 1, 0, 0, 1, 0, 0])
    canvas.setActiveObject(img)
    })

    $("#butt").click(function(){
    img = canvas.getActiveObject()

    if(img.getSrc()==smallImg){
    img.setSrc(bigImg)
    }else{
    img.setSrc(smallImg)
    }

    setTimeout(function(){
        canvas.renderAll()
        canvas.setActiveObject(img)
    }, 2000); 
    });
});

Answer 1

您使用setCoords()是正确的，但将canvas.renderAll()和setSrc()放在setTimeout()回调中，以便删除if (img.getSrc() == smallImg) { img.setSrc(bigImg, function() { canvas.renderAll(); img.setCoords(); }); } else { img.setSrc(smallImg, function() { canvas.renderAll(); img.setCoords(); }); }函数调用：

var createScene = function()
{
    // Create Scene
    var scene = new BABYLON.Scene(engine);

    // Create Camera
    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 10, 0), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    // Create Points
    var x = 0;
    var z = 0;
    var points = [
        new BABYLON.Vector3(x - 1, 0, z + 1.5),
        new BABYLON.Vector3(x + 1, 0, z + 1.5),
        new BABYLON.Vector3(x + 1.5, 0, z),
        new BABYLON.Vector3(x + 1, 0, z - 1.5),
        new BABYLON.Vector3(x - 1, 0, z - 1.5),
        new BABYLON.Vector3(x - 1.5, 0, z),
        new BABYLON.Vector3(x - 1, 0, z + 1.5)
    ];

    // Create Hex
    var hex = BABYLON.Mesh.CreateLines("hex", points, scene);
    hex.color = BABYLON.Color3.Black();

    /* Question
        what can I do now to create a custom 2D shape that
        is a single filled plane within these defined points?
    */

    // Done
    return scene;
};

Answer 2

在新图像上调用setCoords（）可以解决问题。

在setSrc（）之后，fabricjs鼠标事件失败

2 个答案: