通过鼠标向上添加形状到图像对象

Question

我是JS和FabicJS的新手。目前，我正在研究通过Web应用程序为地图设置一些点的项目。

所以，我决定使用FabicJS将Map Image加载到Canvas中的Image Object，然后使用Mouse Event在该图像上设置新的pin。

我完成了加载图像和设置其弹跳鼠标移动看起来像谷歌地图。但我无法处理Click事件的Click事件

我完成了加载图像和设置其弹跳鼠标移动看起来像谷歌地图。但我无法处理Click对象的Click事件以在其中绘制Circle。

    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

我改为为画布设置背景图像，宽度和高度适合视口。之后，我为画布的背景图像设置了平移。它的工作现在很好。