toast-ui.vue-image-editor icon indicating copy to clipboard operation
toast-ui.vue-image-editor copied to clipboard

why broken css style?

Open rurusyu opened this issue 4 years ago • 6 comments

image

Version

1.2.0

Development Environment

MAC OS Mojave

Current Behavior

<template>
  <ImageEditor :options="options"
                ref="tuiImageEditor"
                @addText="onAddText"
                @objectMoved="onObjectMoved"
  ></ImageEditor>
</template>

<script>
import 'tui-image-editor/dist/tui-image-editor.css';
import {ImageEditor} from '@toast-ui/vue-image-editor';
import icon_a from "tui-image-editor/dist/svg/icon-a.svg";
import icon_b from "tui-image-editor/dist/svg/icon-b.svg";
import icon_c from "tui-image-editor/dist/svg/icon-c.svg";
import icon_d from "tui-image-editor/dist/svg/icon-d.svg";

export default {
    components: {
        ImageEditor,
    },
    data() {
        return {
            useDefaultUI: false,
            options: { // for tui-image-editor component's "options" prop
                cssMaxWidth: document.documentElement.clientWidth,
                cssMaxHeight: document.documentElement.clientHeight,
                
                selectionStyle: {
                  cornerSize: 50,
                  rotatingPointOffset: 70
                },

                includeUI : {             
                    initMenu: "filter",
                    menuBarPosition: "bottom",
                    uiSize:{
                        width: "100%",
                        height: "800px",
                    },
                    theme: theme,
                    locale: locale_ko,
                },
                resizeInfo: {
                    uiSize: {
                        width: "500px",
                        height: "500px",
                    },
                    imageSize:{
                        oldWidth: 100,
                        oldHeight: 100,
                        newWidth: 700,
                        newHeight: 700,
                    }
                }
            }
        };
    },
   
}
</script>

// Write example code

Expected Behavior

I loaded picture simply. but why broken css style??

why difference style between nhn and me??

image

rurusyu avatar Mar 05 '20 08:03 rurusyu

I think you can resolve this issue by importing css style of color picker. Please try importing like below.

import "tui-color-picker/dist/tui-color-picker.css";

ryuckel avatar Mar 08 '20 08:03 ryuckel

thank you @ryuckel . almost issue was resolved. but, cornerSize icon was not changed.. how to change cornerSize icon do you know?? @ryuckel

rurusyu avatar Mar 09 '20 02:03 rurusyu

@rurusyu Good. How about editing selectionStyle object like below? selectionStyle: { cornerSize: 50, rotatingPointOffset: 70 },

ryuckel avatar Mar 09 '20 03:03 ryuckel

thank you for appreciate. ^^ have a nice day~! @ryuckel

rurusyu avatar Mar 09 '20 07:03 rurusyu

Hi, i have a problem with the css style in the corner size, but it shows up when i load an image. It looks too small image

I tried editing the selectionStyle but it didn't work for me

UlloaDP avatar Sep 30 '20 14:09 UlloaDP

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.
    




  
    
      
        * 받는 사람 : 

박시우([email protected])

        * 발송 시간 : 

2020-09-30T23:20:35

        * 메일 제목 : 

Re: [nhn/toast-ui.vue-image-editor] why broken css style? (#35)

            * 실패 사유 : 
          
          
            

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      [email protected]
      으로 문의해 주시기 바랍니다.
    




    © Dooray!.

swtalk avatar Sep 30 '20 14:09 swtalk