Question

我需要允许用户绘制一个形状，我已经使用了svg。在其他浏览器中，代码工作得非常好，但是对于chrome版本52.0.2743.116 m，它会闪烁。当我创建它时它工作正常。但随着chrome的更新，问题开始发生问题在Chrome版本49.0.2623.110 m

中无法复制

https://jsfiddle.net/2svxmgwu/1/

尝试从左上方向右下方拖放黄色区域，您将看到条形码请参阅附图

如果创建形状的方向不是从左上角到下底，则不会发生闪烁。

代码 HTML

<div class="thisComp">
  <div class="svgElementDiv">
  </div>
</div>

的js

var svgShape = $('<svg viewBox="0 0 640 480" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title>  <rect stroke="#5B9BD5" id="svg_11" height="473.99998" width="635.99997" y="3" x="3" stroke-linecap="null" stroke-linejoin="null" preserveAspectRatio="none" vector-effect="non-scaling-stroke" stroke-dasharray="null" stroke-width="3" fill="#5B9BD5"/> </g></svg>');
    var self = this;
//Added for chrome browser as without this flickering is very high
        svgShape.find('[vector-effect="non-scaling-stroke"]').removeAttr('vector-effect');
    var $ShapeWrapper = $(".svgElementDiv");
var $thisComp = $(".thisComp");
    svgShape.css({
        position: "absolute",
        left: "0",
        top: "0",
        width: "100%",
        height: "100%",
        opacity: "0.5"
    });
    $ShapeWrapper.css({
        position: "fixed"
    });
    $thisComp.mousedown(function (event) {
        if ($ShapeWrapper.length > 0) {
            $ShapeWrapper.html(svgShape);
            $ShapeWrapper.css("left", event.clientX);
            $ShapeWrapper.css("top", event.clientY);
            self._selectorLeftPos = event.clientX;
            self._selectorTopPos = event.clientY;
            $ShapeWrapper.css({
                width: "0",
                height: "0"
            });
            self._dragged = false;
            event.preventDefault();
        }
    });
    var removeShape = function (event) {
        if ($ShapeWrapper.find(svgShape).length > 0 && !(event.type=="mouseleave" && $(event.relatedTarget).closest('.guideWrapper').length>0)) {
            var startX = (($ShapeWrapper.offset().left - $thisComp.offset().left) / self._transformRatio) / self._conversionFactor;
            var startY = (($ShapeWrapper.offset().top - $thisComp.offset().top) / self._transformRatio) / self._conversionFactor;
            var selectWidth = ($ShapeWrapper.width() / self._transformRatio) / self._conversionFactor;
            var selectHeight = ($ShapeWrapper.height() / self._transformRatio) / self._conversionFactor;
            self._shapeData = '{"left":"' + startX + '","top":"' + startY + '","height":"' + selectHeight + '","width":"' + selectWidth + '"}';
            svgShape.remove();
        }
    }
    $thisComp.mousemove(function (event) {
        if ($ShapeWrapper.length > 0) {
            var width = 0;
            var height = 0;
            if (event.clientX <= self._selectorLeftPos) {
                width = $ShapeWrapper.offset().left - event.clientX + $ShapeWrapper.width();
                $ShapeWrapper.css("left", event.clientX);
            }
            else {
                width = event.clientX - $ShapeWrapper.offset().left;
            }
            if (event.clientY <= self._selectorTopPos) {
                height = $ShapeWrapper.offset().top - event.clientY + $ShapeWrapper.height();
                $ShapeWrapper.css("top", event.clientY);
            }
            else {
                height = event.clientY - $ShapeWrapper.offset().top;
            }
            $ShapeWrapper.css("width", width);
            $ShapeWrapper.css("height", height);
            if (width > 3 || height > 3) {
                self._dragged = true;
            }
        }
    });
    $thisComp.bind("mouseup", removeShape);
    $thisComp.bind("mouseleave", removeShape);

的CSS

.thisComp{
  height:400px;
  width:400px;
  background-color:yellow;
}

Svg在Chrome浏览器中发生闪烁

0 个答案: