@ -1,7 +1,5 @@
< template >
< div
class = "container"
ref = "container" >
< div class = "container" ref = "container" >
< canvas
: height = "settings.height"
ref = "canvas"
@ -11,82 +9,97 @@
< / template >
< script setup >
import { computed , defineEmits , defineProps , onMounted , reactive , ref , watch } from 'vue'
import useRendering from './composables/useRendering'
import {
computed ,
defineEmits ,
defineProps ,
onMounted ,
reactive ,
ref ,
watch ,
} from 'vue'
import useRendering from './composables/useRendering'
const props = defineProps ( {
settings : Object ,
} )
const props = defineProps ( {
settings : Object ,
} )
const emit = defineEmits ( [ 'ready' ] )
const emit = defineEmits ( [ 'ready' ] )
const container = ref ( null )
const height = ref ( 0 )
const width = ref ( 0 )
const resizeObserver = reactive ( new ResizeObserver ( ( ) => {
if ( ! container . value ) return
height . value = container . value . clientHeight
width . value = container . value . clientWidth
} ) )
const container = ref ( null )
const height = ref ( 0 )
const width = ref ( 0 )
const resizeObserver = reactive (
new ResizeObserver ( ( ) => {
if ( ! container . value ) return
height . value = container . value . clientHeight
width . value = container . value . clientWidth
} )
)
/ / H a n d l e s s i z i n g o f t h e c a n v a s
const canvasStyle = computed ( ( ) => {
if ( props . settings . height <= height . value && props . settings . width <= width . value ) {
return {
height : ` ${ props . settings . height } px ` ,
width : ` ${ props . settings . width } px ` ,
/ / H a n d l e s s i z i n g o f t h e c a n v a s
const canvasStyle = computed ( ( ) => {
if (
props . settings . height <= height . value &&
props . settings . width <= width . value
) {
return {
height : ` ${ props . settings . height } px ` ,
width : ` ${ props . settings . width } px ` ,
}
}
}
const heightRatio = height . value / props . settings . height
const widthRatio = width . value / props . settings . width
const bestRatio = Math . min ( widthRatio , heightRatio )
const heightRatio = height . value / props . settings . height
const widthRatio = width . value / props . settings . width
const bestRatio = Math . min ( widthRatio , heightRatio )
return {
height : ` ${ props . settings . height * bestRatio } px ` ,
width : ` ${ props . settings . width * bestRatio } px ` ,
}
} )
return {
height : ` ${ props . settings . height * bestRatio } px ` ,
width : ` ${ props . settings . width * bestRatio } px ` ,
}
} )
const canvas = ref ( null )
let context = ref ( null )
const canvas = ref ( null )
let context = ref ( null )
/ / M a i n r e n d e r i n g r o u t i n e .
const renderPreview = useRendering ( context )
/ / M a i n r e n d e r i n g r o u t i n e .
const renderPreview = useRendering ( context )
/ / R e n d e r o n c a n v a s r e s i z e .
const canvasResizeObserver = reactive (
new ResizeObserver ( ( ) => {
if ( ! canvas . value ) return
renderPreview ( props . settings )
} )
)
/ / R e n d e r o n c a n v a s r e s i z e .
const canvasResizeObserver = reactive ( new ResizeObserver ( ( ) => {
if ( ! canvas . value ) return
renderPreview ( props . settings )
} ) )
/ / R e n d e r o n s e t t i n g c h a n g e d .
watch ( props . settings , ( newSettings ) => {
renderPreview ( newSettings )
} )
/ / R e n d e r o n s e t t i n g c h a n g e d .
watch ( props . settings , ( newSettings ) => {
renderPreview ( newSettings )
} )
onMounted ( ( ) => {
resizeObserver . observe ( container . value )
onMounted ( ( ) => {
resizeObserver . observe ( container . value )
/ / R e g i s t e r o b s e r v e r , G e t t h e c o n t e x t , a n d e m i t c a n v a s t o p a r e n t .
canvasResizeObserver . observe ( canvas . value )
context . value = canvas . value . getContext ( '2d' )
emit ( 'ready' , canvas . value )
} )
/ / R e g i s t e r o b s e r v e r , G e t t h e c o n t e x t , a n d e m i t c a n v a s t o p a r e n t .
canvasResizeObserver . observe ( canvas . value )
context . value = canvas . value . getContext ( '2d' )
emit ( 'ready' , canvas . value )
} )
< / script >
< style scoped >
. container {
align - items : center ;
background : # 191919 ;
display : flex ;
flex : 1 1 auto ;
justify - content : center ;
overflow : hidden ;
}
. container {
align - items : center ;
background : # 191919 ;
display : flex ;
flex : 1 1 auto ;
justify - content : center ;
overflow : hidden ;
}
. container canvas {
background : # 000 ;
box - shadow : 8 px 8 px 16 px 0 rgba ( 0 , 0 , 0 , 0.5 ) ;
}
. container canvas {
background : # 000 ;
box - shadow : 8 px 8 px 16 px 0 rgba ( 0 , 0 , 0 , 0.5 ) ;
}
< / style >
