Question

I am new on JS and FabicJS. Currently, I am working on project to setting some points to a map by web application.

So, I decided to use FabicJS to load Map Image to Image Object in Canvas then using Mouse Event to setting new pin on that image.

I am done with loading image and setting its bounce for mouse moving look like google map. But I cannot handle click event to Image

I am done with loading image and setting its bounce for mouse moving look like google map. But I cannot handle click event to Image object to draw Circle inside it.

    var mapCanvas = document.getElementById('setting-canvas'); // Get Element of Canvas using display MapImage
    let cWidth = window.getComputedStyle(mapCanvas).getPropertyValue('width').slice(0, -2); // Get Map-Bounce Width
    let cHeight = window.getComputedStyle(mapCanvas).getPropertyValue('height').slice(0, -2); // Get Map-Bounce Height
    var drawingCanvas = new fabric.Canvas('setting-canvas', { selection: false }) // Initial FabricJS Canvas to setting location
    drawingCanvas.setWidth(cWidth); // Set Width for Drawing Canvas
    drawingCanvas.setHeight(cHeight); // Set Height for Drawing Canvas

// Set image map to canvas (scaling to fit with canvas)
function loadMapToCanvas(imageURL, canvasObj) {
    //Scaling image fit to canvas size
    //let imageSrc = await getMeta(imageURL);

    var MapImage = new fabric.Image.fromURL(imageURL, function (mapImage) {
        //var r = canvasObj.getRetinaScaling();
        mapImage.set({
            left: 0,
            top: 0
        });
        var hRatio = canvasObj.getHeight() / mapImage.getScaledHeight();
        var wRatio = canvasObj.getWidth() / mapImage.getScaledWidth();
        var ratio = Math.max(wRatio, hRatio);
        mapImage.scaleX = ratio; // Width Ratio between MapImage and Screen
        mapImage.scaleY = ratio; // Height Ratio between MapImage and Screen
        mapImage.setControlsVisibility({
            tl: false, mt: false, //top-left + middle-top
            tr: false, ml: false, //top-right + middle-left
            mr: false, bl: false, //middle-right + bottom-left
            mb: false, br: false  //middle-bottom + bottom-right
        })
        mapImage.evented = false,
        canvasObj.add(mapImage);
    });

    return MapImage;

}

    // Set Moving Bounce for Map Image
    drawingCanvas.on('object:moving', function (e) {
        var obj = e.target;
        obj.setCoords();
        // top-left corner
        if (obj.getBoundingRect().top > 0 || obj.getBoundingRect().left > 0) {
            obj.top = Math.min(obj.top - obj.getBoundingRect().top, obj.top);
            obj.left = Math.min(obj.left - obj.getBoundingRect().left, obj.left);
        }

        // bot-right corner
        if (obj.getBoundingRect().top + obj.getBoundingRect().height < obj.canvas.height
            || obj.getBoundingRect().left + obj.getBoundingRect().width < obj.canvas.width) {
            obj.top = Math.max(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
            obj.left = Math.max(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
        }
    });

Answer 1

我更改了为画布设置backgroundImage的宽度和高度适合视口的情况。之后，我设置了画布的backgroundImage的平移。现在效果很好。

Add shape into Image Object by Mouse Up

1 个答案: