Fabric js custom rotate icon is not visible in only iphone's google chrome browser

问题

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

This is jsfiddle

回答1:

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

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

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.

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

来源：https://stackoverflow.com/questions/34352604/fabric-js-custom-rotate-icon-is-not-visible-in-only-iphones-google-chrome-brows

标签

javascript

ios

google-chrome

fabricjs