2016-04-06 12 views
1

Bazı SVG'leri bir görüntüye dönüştürmek için canvg kullanıyorum. Şu anda tuval bölümünün SVG'si gayet iyi çalışıyor. Ancak, bir işaretçinin bir işaretçiye girdiğinde oluşturulan tuvalin neden değiştiğini belirleyemiyorum. Oluşturulan tuvali kopyalamak zorunda mıyım yoksa bir şey mi özlüyorum? MacOS X El Capitan altında Firefox DE 47 ve Chrome 49 üzerinde Doğrulanmış Canvg - mousemove üzerinde kanvas değişiklikleri

svgElement.each(function() { 
    var canvas = document.createElement("canvas"); 
    //convert SVG into a XML string 
    var xml = (new XMLSerializer()).serializeToString(this); 
    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 
    // Rounded svg dimensions 
    var width = Math.floor(svgElement.width()); 
    var height = Math.floor(svgElement.height()); 
    // Draw the SVG onto a canvas 
    canvas.width = width; 
    canvas.height = height; 
    $(canvas).css('border', '2px solid red'); 
    canvg(canvas, xml, { 
     ignoreDimensions: true, 
     scaleWidth: width, 
     scaleHeight: height 
    }); 
    $('body').append(canvas); // When pointer enters the canvas it changes 
    // I can copy the canvas and that copy won't change on pointer enter. 
    $(this).hide(); 
} 

jsfiddle

(aynı zamanda benim arkadaşım bu Firefox ve Chrome hem Windows altında oluyor doğruladıktan).

güncellenmiş keman:

cevap

2

Sen ignoreMouse seçeneği kullanmak zorunda http://jsfiddle.net/35t6fkvj/7/ buna

olsa bazı fare olayları eklemek gerektiğini düşünüyor neden

canvg(canvas, xml, { 
    ignoreDimensions: true, 
    scaleWidth: width, 
    scaleHeight: height, 
    ignoreMouse: true 
}); 

emin değil

İlgili konular