javascript - Fabric js 自定义旋转图标仅在 iphone 的 google chrome 浏览器中不可见

Question

我在 fabric js 中创建了一个编辑器。我正在使用自定义图标进行旋转，这仅在 iphone 的谷歌浏览器中不可见。请给我解决方案。我用于自定义图标的这段代码

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

Answer 1

可能是图片加载问题。

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

首先将您的 fiddle 更新为 fabricjs 1.5.0，此功能不适用于 1.4.0。

如您所见，每绘制一帧就会重新加载图标。这根本不是最佳选择，可能会导致 drawImage 函数绘制仍然刷新的图像元素。

在 iphone 上试试这个 fiddle 并检查它是否工作，也许一开始没有选择但至少在移动对象时。