52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
rect: [x: number, y: number, width: number, height: number];
|
|
opacity?: number;
|
|
}>(),
|
|
{
|
|
opacity: 1,
|
|
},
|
|
);
|
|
|
|
const { onRender } = useScreen();
|
|
const { assets } = useAssets();
|
|
|
|
onRender((ctx) => {
|
|
const [x, y, w, h] = props.rect;
|
|
|
|
ctx.globalAlpha = props.opacity;
|
|
|
|
// top-left corner
|
|
assets.images.common.selectorCornersSheet.draw(ctx, x, y, { colored: true });
|
|
|
|
// top-right corner
|
|
ctx.save();
|
|
ctx.scale(-1, 1);
|
|
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), y, {
|
|
colored: true,
|
|
});
|
|
ctx.restore();
|
|
|
|
// bottom-left corner
|
|
ctx.save();
|
|
ctx.scale(1, -1);
|
|
assets.images.common.selectorCornersSheet.draw(ctx, x, -(y + h), {
|
|
colored: true,
|
|
});
|
|
ctx.restore();
|
|
|
|
// bottom-right corner
|
|
ctx.save();
|
|
ctx.scale(-1, -1);
|
|
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), -(y + h), {
|
|
colored: true,
|
|
});
|
|
ctx.restore();
|
|
}, 40);
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|