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中不可见.请给我解决方法. 我用于自定义图标的代码

I have created an editor in fabric js. I am using custom icon for rotate and this is not visible only in iphone's google chrome. Please give me solution. This code i am using for custom icon

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

推荐答案

这可能是图像加载问题.

It may be a image loading issue.

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，此功能在1.4.0上不起作用.

First of all update your fiddle to fabricjs 1.5.0, this function is not working on 1.4.0.

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

As you see you are reloading the icon every frame draw. This is not optimal at all and may cause the drawImage function to draw a still refreshing image element.

在iphone上尝试这种小提琴，然后检查它是否正常工作，也许一开始不是选择而是至少在移动对象时进行.

Try this fiddle on iphone and check if it is working, maybe not at first select but at least on moving of object.

这篇关于Fabric JS自定义旋转图标仅在iPhone的Google Chrome浏览器中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！