Canvas 画布旋转-织物js
我已经创建了一个canvas元素，并使用fabric js完成了旋转功能。一切正常。但我只在Windows7的Chrome浏览器中看到一组指向画布中心的虚线，在某些设备中也看到了，而不是在所有Windows7和Chrome组合中。请参阅以下链接“画布旋转”。有人面临这个问题吗。？ 我也尝试了一个简单的例子，但面临着同样的问题。虚线指向画布中心点的中心Canvas 画布旋转-织物js,canvas,fabricjs,Canvas,Fabricjs,我已经创建了一个canvas元素，并使用fabric js完成了旋转功能。一切正常。但我只在Windows7的Chrome浏览器中看到一组指向画布中心的虚线，在某些设备中也看到了，而不是在所有Windows7和Chrome组合中。请参阅以下链接“画布旋转”。有人面临这个问题吗。？ 我也尝试了一个简单的例子，但面临着同样的问题。虚线指向画布中心点的中心 Fiddle链接供您参考该问题通过使用2.x版本的fabric js解决。请参阅下文。 您能分享您的最小代码来说明问题吗？ fabric.lo
Fiddle链接供您参考该问题通过使用2.x版本的fabric js解决。请参阅下文。
您能分享您的最小代码来说明问题吗？
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();
});
<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);