画布旋转 - Fabric js

debugcn 发表于 Dev

穆图

我已经创建了一个画布元素并使用 fabric js 完成了旋转功能。一切正常。但是我只在 Windows 7 的 Chrome 浏览器中看到一组虚线指向画布的中心，在某些设备中也是如此，而不是在所有 Windows 7 和 chrome 组合中。请参阅以下链接“canvas_rotate”。有没有人遇到过这个问题。？画布_旋转

fabric.loadSVGFromString(svgStr, function(objects, options) {
        console.log("fabric.loadSVGFromString",svgStr)
            var obj = fabric.util.groupSVGElements(objects, options);
            obj.scaleToHeight(70) // Scales it down to some small size
            .scaleToWidth(70)
            .setTop(_t) // Centers it (no s**t, Sherlock)
            .setLeft(_l)

            // Centers it (no s**t, Sherlock)
            .setCoords();
            obj.set({lockUniScaling: true, shapeType:shapeType, cornerColor:'rgba(71,71,71,1)',  cornerSize: 17, cornerStyle : 'circle', transparentCorners: false, borderColor: 'rgba(71,71,71,1)', padding: -1});
            /*Rotation Icon*/
            obj.drawControls = function (ctx) {
                if (!this.hasControls) {return this;}
                var wh = this._calculateCurrentDimensions(),
                width = wh.x,
                height = wh.y,
                scaleOffset = this.cornerSize,
                left = -(width + scaleOffset) / 2,
                top = -(height + scaleOffset) / 2,
                methodName = this.transparentCorners ? 'stroke' : 'fill';

                ctx.save();
                ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
                if (!this.transparentCorners) {
                    ctx.strokeStyle = this.cornerStrokeColor;
                }
                this._setLineDash(ctx, this.cornerDashArray, null);
                // top-left
                this._drawControl('tl', ctx, methodName,
                left,
                top);

                // top-right
                this._drawControl('tr', ctx, methodName,
                left + width,
                top);

                // bottom-left
                this._drawControl('bl', ctx, methodName,
                left,
                top + height);

                // bottom-right
                this._drawControl('br', ctx, methodName,
                left + width,
                top + height);
                if (this.hasRotatingPoint) {
                    var rotate = new Image(), rotateLeft, rotateTop;
                    rotate.src = 'content/assets/image/icon_rotate_canvas.png';
                    rotateLeft = left + width / 2;
                    rotateTop = top - this.rotatingPointOffset;
                    ctx.drawImage(rotate, rotateLeft, rotateTop, 17, 17);
                }
                ctx.restore();
                return this;
            }
            /*Rotation Icon Ends */
            canvasWrap.add(obj);

            canvasWrap.discardActiveObject();
            canvasWrap.setActiveObject(obj);
            canvasWrap.selection = false;
            canvasWrap.renderAll();
        });

我也尝试了一个简单的例子，但面临同样的问题。虚线指向画布中心点的中心。

simple_page_rotate 的屏幕截图

<html>
<head>
    <title>Page Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
    <script src="custom.js"></script>
</head>
<body>
    <canvas id="c" width="700px" height="500px" style="outline:1px solid red"></canvas>
    <!-- source: http://commons.wikimedia.org/wiki/File:Bort_znamia_3.svg -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="57.08px" height="74.223px" viewBox="0 0 57.08 74.223" enable-background="new 0 0 57.08 74.223" xml:space="preserve">
    <path d="M6.572,43.413l0.505,7.576l50.003,0.505l-0.505-7.071L6.572,43.413z"/>
    <path d="M7.077,54.02l0.505,7.576l49.498,1.01l-0.505-7.071L7.077,54.02z"/>
    <path d="M7.582,65.131l0.505,8.586l48.993,0.505v-6.566L7.582,65.131z"/>
    </svg>
</body>

setTimeout(function(){ 

var svgEl = document.body.getElementsByTagName('svg')[0];
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svgEl);

var canvas = new fabric.Canvas('c');

var path = fabric.loadSVGFromString(svgStr,function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.set({ left: 0, top: 0 })
    .setCoords();

  canvas.add(obj).renderAll();
});}, 0);

小提琴链接供您参考旋转的简单页面

穆图

该问题已通过使用 2.x 版本的 Fabric js 解决。请参阅下文。https://github.com/fabricjs/fabric.js/issues/5012

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。