Fabric js 自定义旋转图标仅在 iphone 的 google chrome 浏览器中不可见
Fabric js custom rotate icon is not visible in only iphone's google chrome browser
我用 fabric js 创建了一个编辑器。我正在使用自定义图标进行旋转,这仅在 iphone 的 google chrome 中不可见。请给我解决方案。
此代码用于自定义图标
isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
// overriding _drawControl method
fabric.util.object.extend(fabric.Object.prototype, {
hasRotatingPoint: true,
cornerSize: 25,
_drawControl: function(control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize;
isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
if(control !== 'mtr')
ctx['fillRect'](left, top, size, size);
var SelectedIconImage = new Image();
if(control === 'mtr') {
SelectedIconImage.src = 'http://s1.postimg.org/6lqguc8rf/rotate.jpg';
ctx.drawImage(SelectedIconImage, left, top, size, size);
}
}
});
这是jsfiddle
可能是图片加载问题。
if(control === 'mtr') {
if (this.isLoaded) {
ctx.drawImage(this.selectedIconImage, left, top, size, size);
} else {
var self = this;
this.selectedIconImage.onload = function() {
self.isLoaded = true;
ctx.drawImage(self.selectedIconImage, left, top, size, size);
}
this.selectedIconImage.src = this.iconSrc;
}
}
首先将您的 fiddle 更新到 fabricjs 1.5.0,此功能在 1.4.0 上不起作用。
如您所见,每绘制一帧就会重新加载图标。这根本不是最佳选择,可能会导致 drawImage 函数绘制仍然刷新的图像元素。
在 iphone 上尝试这个 fiddle 并检查它是否工作,也许一开始没有 select 但至少在移动对象时。
我用 fabric js 创建了一个编辑器。我正在使用自定义图标进行旋转,这仅在 iphone 的 google chrome 中不可见。请给我解决方案。 此代码用于自定义图标
isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
// overriding _drawControl method
fabric.util.object.extend(fabric.Object.prototype, {
hasRotatingPoint: true,
cornerSize: 25,
_drawControl: function(control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize;
isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
if(control !== 'mtr')
ctx['fillRect'](left, top, size, size);
var SelectedIconImage = new Image();
if(control === 'mtr') {
SelectedIconImage.src = 'http://s1.postimg.org/6lqguc8rf/rotate.jpg';
ctx.drawImage(SelectedIconImage, left, top, size, size);
}
}
});
这是jsfiddle
可能是图片加载问题。
if(control === 'mtr') {
if (this.isLoaded) {
ctx.drawImage(this.selectedIconImage, left, top, size, size);
} else {
var self = this;
this.selectedIconImage.onload = function() {
self.isLoaded = true;
ctx.drawImage(self.selectedIconImage, left, top, size, size);
}
this.selectedIconImage.src = this.iconSrc;
}
}
首先将您的 fiddle 更新到 fabricjs 1.5.0,此功能在 1.4.0 上不起作用。
如您所见,每绘制一帧就会重新加载图标。这根本不是最佳选择,可能会导致 drawImage 函数绘制仍然刷新的图像元素。
在 iphone 上尝试这个 fiddle 并检查它是否工作,也许一开始没有 select 但至少在移动对象时。