diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue index a2b8b00c..2c078861 100644 --- a/packages/editor/src/components/ScrollViewer.vue +++ b/packages/editor/src/components/ScrollViewer.vue @@ -55,7 +55,7 @@ export default defineComponent({ style: computed( () => ` width: ${props.width}px; - height: ${(props.height || 0) - 40}px; + height: ${props.height}px; position: absolute; margin-top: 30px; `, diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts index 63e087a0..169c60cd 100644 --- a/packages/editor/src/services/ui.ts +++ b/packages/editor/src/services/ui.ts @@ -155,10 +155,16 @@ class Ui extends BaseService { const { stageRect, stageContainerRect } = state; const { height, width } = stageContainerRect; if (!width || !height) return 1; - if (width > stageRect.width && height > stageRect.height) { + + // 30为标尺的大小 + const stageWidth = stageRect.width + 30; + const stageHeight = stageRect.height + 30; + + if (width > stageWidth && height > stageHeight) { return 1; } - return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1); + // 60/80是为了不要让画布太过去贴住四周(这样好看些) + return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1); } } diff --git a/packages/editor/src/theme/stage.scss b/packages/editor/src/theme/stage.scss index cb7ea2b3..caffe8eb 100644 --- a/packages/editor/src/theme/stage.scss +++ b/packages/editor/src/theme/stage.scss @@ -13,9 +13,9 @@ height: 100%; z-index: 0; position: relative; - border: 1px solid $--border-color; transition: transform 0.3s; box-sizing: content-box; + box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; &::-webkit-scrollbar { width: 0 !important;