Need larger resizing handles on added objects.

[humblecoder]

Version

3.3.0

Development Environment

MacOS 10.14.1 (18B75) Chrome Version 70.0.3538.110 (Official Build) (64-bit)

Current Behavior

I'm sure there is a way to adjust it, but when adding new objects on mobile, the resizing handles are tiny.

Expected Behavior

Larger resizing handles.

[jungeun-cho]

try it.

imageEditor.resizeCanvasDimension({
            width: 900,
            height: 700
        }).then(() =>
            ...
        )

or

imageEditor.setObjectProperties(id, {
         left:100,
         top:100,
         width: 200,
         height: 200,
         opacity: 0.5
      });

[humblecoder]

Yup, I do the following:

let minMax = this.calculateAspectRatioFit(resp.newWidth,resp.newHeight,screen.availWidth,screen.availHeight)
this.EditorInstance.invoke('resizeCanvasDimension',{width:minMax.width,height:minMax.height})
                    .then(()=>{
                        ...
                    })

That all works well. Generally the scaled image ends up being 375x500-ish. It looks great. However, the added objects don't look great. Do I need to rescale after every single object?

[jungeun-cho]

Did you specify the cssMaxWidth and cssMaxHeight property in the option?

const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
             ...
             cssMaxWidth: 300,
             cssMaxHeight: 200
         });

[humblecoder]

Yes, it's based on screen as follows:

cssMaxWidth: screen.width,
cssMaxHeight: screen.height,

[hzeeli]

@jungeun-cho i'm trying to resize the canvas's size after change canvas bg-img with loadImageFromURL but use this.$refs.tuiImageEditor.invoke('resizeCanvasDimension',{ width: 1000, height: 780 }); it doesn't work, why?

[hzeeli]

done it use this.$refs.tuiImageEditor.invoke('ui.resizeEditor',{imageSize: {newWidth: 1000, newHeight: 780}}); xd

[jungeun-cho]

@humblecoder check it! http://nhnent.github.io/tui.image-editor/latest/Ui.html

imageEditor.ui.resizeEditor({
    imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700},
    uiSize: {width: 1000, height: 1000}
});