javascript - una - Cómo mostrar múltiples gráficos svg externos en un lienzo html5

insertar svg con css

Question

Creé un lienzo html 5 y agregué algunas formas usando ctx.fillRect (X, Y, W, H); y algunas otras funciones de JavaScript.

Ahora quiero agregar un gráfico svg en varios lugares de ese lienzo.

La razón por la que quiero usar svg es la nitidez y la calidad de la imagen. Intenté usar el método drawImage en HTML5, pero la imagen que quiero dibujar no da una salida de calidad cuando se agrega al lienzo usando el método drawImage. No importa cómo la imagen de alta resolución que uso, hace una imagen de muy baja calidad.

Pero creo que usar un gráfico svg es la solución.

Este es el código que utilicé,

    <canvas id="myCanvas" style="border: 2px solid #000000; width: 1280px; height: 800px;"></canvas> 
<img id="location" src="location.png" alt="The Scream" width="25.5" height="41.5">
<script >   
                var c = document.getElementById("myCanvas"); 
        var ctx = c.getContext("2d"); 

                ctx.fillRect(4,4, 12,10);
        ctx.fillStyle=fontBlack;        
        ctx.fillText("1",8,10);     
        ctx.fillRect(5,16, 7, 16);
        ctx.fillRect(5,33, 7, 28);
        ctx.fillRect(5,62, 7, 50);
        ctx.fillRect(5,113, 7, 15);
        ctx.fillRect(5,129, 7, 15);

//I have a list of coordinates in a javascript object list called selectedShelfList, I''m getting the necessary coordinates from that.

function drawLocations(){ 

            for (var i=0; i<selectedShelfList.length; i++)
            {

                var x_coordinate = selectedShelfList[i].shelf_x;
                var y_coordinate = selectedShelfList[i].shelf_y;


                var img=document.getElementById("location");
                ctx.drawImage(img,x_coordinate,y_coordinate,8.5,13.8);

                //Instead of drawImage method i want to use a code to show a svg graphic here
            }
        } 
</script >  

Como las soluciones que encontré en stackoverflow para este problema, intenté usar canvg.js como se mencionaba en las preguntas similares anteriores, pero no estaba claro. por ejemplo:

var ctx = document.getElementById(''test'').getContext(''2d'');
ctx.drawSvg(''<svg><rect x="0" y="0" width="100" height="200" fill="red" /></svg>'', 0 , 0 , 500, 500);

¿Cómo debo dar la url para svg externo en este comando? ¿Puedo usar la URL entre '''' como parámetro para drawSvg? Por ejemplo: ctx.drawSvg (''location.svg'', 0, 0, 500, 500);

¿Hay alguna manera en que pueda mostrar un gráfico svg dentro de un lienzo? ¿Puede hacer el truco? Si es así, ¿cómo exactamente?

Por favor ayúdame con esto. :)

Answer 1

¡Usar el canvg funcionó!

var ctx = document.getElementById(''test'').getContext(''2d'');
ctx.drawSvg(''location.svg'', 0 , 0 , 100, 100);

usando el código anterior trabajado. Anteriormente no he agregado correctamente los archivos javascript en el archivo html.

Agregarlos a la carpeta local funcionó

<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="StackBlur.js"></script>
<script type="text/javascript" src="canvg.js"></script> 

Aún así, la calidad de la imagen no es mucho pero es mejor que usar una imagen con el método drawImage.

Answer 2

[Editado: incluye un ejemplo de pin de mapa muy pequeño]

Hacer un círculo en un pequeño límite de 10 píxeles siempre dará como resultado pixelado.

Hay muy pocos píxeles para "redondear" un borde.

Aquí hay un ejemplo de un pin de mapa más cuadrado que está mucho menos pixelado:

Puede producir este pin de mapa en un código de lienzo como este:

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(110,100);
ctx.lineTo(110,107);
ctx.lineTo(105,115);
ctx.lineTo(100,107);
ctx.lineTo(100,100);
ctx.closePath();
ctx.fillStyle="gold";
ctx.fill();
ctx.strokeStyle="black";
ctx.lineWidth=2;
ctx.stroke();

[Respuesta original]

SVG escala bien, ya que es vector dibujado.

Debería poder hacer esto y obtener un resultado de alta calidad:

Descargue esta imagen de prueba:

https://dl.dropboxusercontent.com/u/139992952//rocket.svg

Entonces este código escalará el cohete svg mientras mantiene la calidad:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var size=100;

    var svg1=new Image();
    svg1.width=150;
    svg1.onload=function(){
        ctx.drawImage(svg1,0,0,size,size);
    }
    svg1.src="rocket.svg";

    $("#bigger").click(function(){ 
        size+=100; 
        ctx.drawImage(svg1,0,0,size,size);
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="bigger">Bigger!</button><br>
    <canvas id="canvas" width=900 height=900></canvas>
</body>
</html>