Canvg-canvas在mousemove上进行更改

Canvg - canvas changes on mousemove

本文关键字：mousemove Canvg-canvas      更新时间：2024-02-18

我使用canvg将一些SVG渲染到图像中。目前SVG到画布的部分工作得很好。然而，我无法确定当指针进入生成的画布时，生成的画布为什么会发生变化。我真的必须复制生成的画布吗？还是我缺少了什么？

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

在MacOS X El Capitan下的Firefox DE 47和Chrome 49上进行了验证（我的朋友也验证了这在Firefox和Chrome的Windows下都会发生）。

您必须使用ignoreMouse选项：

更新的fiddle：http://jsfiddle.net/35t6fkvj/7/

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

不确定为什么它认为应该通过

添加一些鼠标事件
相关文章：