Блог

Я новичок в JS и FabicJS. В настоящее время я работаю над проектом по установке некоторых точек на карте с помощью веб-приложения.

Итак, я решил использовать FabicJS для загрузки изображения карты в объект изображения на холсте, а затем с помощью события мыши установить новый pin-код на этом изображении.

Я закончил с загрузкой изображения и настройкой его отскока для перемещения мыши, похожего на карту Google. Но я не могу обработать событие щелчка по изображению

Я закончил с загрузкой изображения и настройкой его отскока для перемещения мыши, похожего на карту Google. Но я не могу обработать событие щелчка по объекту изображения, чтобы нарисовать круг внутри него.

     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);
        }
    });
 

Я изменил, чтобы установить BackgroundImage для холста с шириной и высотой, подходящей для области просмотра. После этого я настроил панорамирование для фонового изображения холста. Теперь он работает хорошо.