Question

美好的一天，我尝试使用leaflet.js作为提供者在cavas上绘制所有图块。但是，因为它使用了translate3d变换 1级 - 地图窗格 2级 - 叠加窗格（我也喜欢寻找关于SVG窗格的解决方案。我使用canVG将svg转换为画布，但不了解如何正确创建画布）

如何在画布上绘制图块？

例如 1级 - 转换：translate3d（-247px，184px，0px）; 这是代码的一部分：

var svgE = $(overlayPane).find('svg');
        var xml;
        var mapPane = $(".leaflet-map-pane")[0];
        var mapTransform = mapPane.style.transform.split(",");
        var mapX = parseFloat(mapTransform[0].split("(")[1].replace("px", ""));
        var mapY = parseFloat(mapTransform[1].replace("px", ""));

        var canvas = document.createElement("canvas");
        canvas.className = "screenShotTempCanvas";

        canvas.width = map.getSize().x;
        canvas.height = map.getSize().y;
        var ctx = canvas.getContext('2d');
        $(canvas).insertBefore($(".leaflet-zoom-animated"));


        if ($("img.leaflet-tile").length !== 0) {
            var myTiles = $("img.leaflet-tile");
            var tilesLeft = [];
            var tilesTop = [];
            var tileMethod = [];
            for (var i = 0; i < myTiles.length; i++) {
                if (myTiles[i].style.left != "") {
                    tilesLeft.push(parseFloat(myTiles[i].style.left.replace("px", "")));
                    tilesTop.push(parseFloat(myTiles[i].style.top.replace("px", "")));
                    tileMethod[i] = "left";
                } else if (myTiles[i].style.transform != "") {
                    var tileTransform = myTiles[i].style.transform.split(",");
                    tilesLeft[i] = parseFloat(tileTransform[0].split("(")[1].replace("px", ""));
                    tilesTop[i] = parseFloat(tileTransform[1].replace("px", ""));
                    myTiles[i].style.transform = "";
                    tileMethod[i] = "transform";
                } else {
                    tilesLeft[i] = 0;
                    tilesRight[i] = 0;
                    tileMethod[i] = "neither";
                };
                myTiles[i].setAttribute('crossOrigin', 'anonymous');
                myTiles[i].style.left = (tilesLeft[i]) + "px";
                myTiles[i].style.top = (tilesTop[i]) + "px";
                ctx.drawImage(myTiles[i], tilesLeft[i], tilesTop[i])
            };
        }
        setTimeout(function() {
            var myImage = canvas.toDataURL("image/jpeg");
            var link = document.createElement('a');
            link.download = "test.jpeg";
            link.href = myImage;
            document.body.appendChild(link);
            $(link).css("display", "none");
            link.click();
            document.body.removeChild(link);
            console.log(sdfsdfgsdfg)
        }, 10000)

第二个问题如何为SVG正确创建画布？

if ($(map.getContainer()).find('svg').length !== undefined && $(map.getContainer()).find('svg').length !== 0) {
            svgE.each(function() {
                L.DomUtil.getPosition(svgE);
                xml = new XMLSerializer().serializeToString(this);
                canvg(canvas, xml);
                $(canvas).insertBefore(this);
                $(this).attr('class', 'tempHide').attr("id", "TempSvgToHide").hide();
            });
        }

在画布上绘制所有传单图块（transform3d）

0 个答案: