label-print-design/es/components/design/svg/svg-ellipse.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"svg-ellipse.vue2.mjs","sources":["../../../../../../src/components/design/svg/svg-ellipse.vue"],"sourcesContent":["<template>\n    <svg-base\n        :element=\"element\"\n        :svgOptions=\"svgOptions\"\n        :draw=\"draw\"\n        :changeSize=\"changeSize\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { reactive } from 'vue-demi';\n\nimport { MyElement, Point } from '@myprint/design/types/entity';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport SvgBase from '@myprint/design/components/design/svg/svg-base.vue';\nimport { BaseType, Selection } from 'd3-selection';\nimport { getRecursionParentPanel } from '@myprint/design/utils/elementUtil';\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\nlet ellipse;\n\nconst svgOptions = reactive({\n    width: 0,\n    height: 0,\n    rotateControl: {},\n    centerPoint: {} as Point,\n    drawAuxiliary: false\n});\n\nfunction changeSize() {\n    initPoint();\n    return true;\n}\n\nfunction draw(chart: Selection<BaseType, any, BaseType, any>) {\n    if (!ellipse) {\n        ellipse = chart.append('ellipse');\n    }\n    \n    ellipse.attr('cx', svgOptions.centerPoint.x) // 设置椭圆中心的 x 坐标\n        .attr('cy', svgOptions.centerPoint.y) // 设置椭圆中心的 y 坐标\n        .attr('rx', svgOptions.centerPoint.x) // 设置椭圆的 x 轴半径\n        .attr('ry', svgOptions.centerPoint.y) // 设置椭圆的 y 轴半径\n        .attr('stroke', props.element.option.color ? props.element.option.color : 'black')\n        .attr('opacity', props.element.option.opacity != undefined ? props.element.option.opacity : 1)\n        .attr('fill', props.element.option.background ? props.element.option.background : 'none'); // 设置椭圆的填充颜色\n    \n}\n\ninitPoint();\n\n\nfunction initPoint() {\n    svgOptions.width = unit2px(props.element.width, getRecursionParentPanel(props.element));\n    svgOptions.height = unit2px(props.element.height, getRecursionParentPanel(props.element));\n    \n    svgOptions.centerPoint = { x: svgOptions.width / 2, y: svgOptions.height / 2 };\n}\n\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAKd,IAAI,IAAA,OAAA,CAAA;AAEJ,IAAA,MAAM,aAAa,QAAS,CAAA;AAAA,MACxB,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,eAAe,EAAC;AAAA,MAChB,aAAa,EAAC;AAAA,MACd,aAAe,EAAA,KAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAA,SAAS,UAAa,GAAA;AAClB,MAAU,SAAA,EAAA,CAAA;AACV,MAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAEA,IAAA,SAAS,KAAK,KAAgD,EAAA;AAC1D,MAAA,IAAI,CAAC,OAAS,EAAA;AACV,QAAU,OAAA,GAAA,KAAA,CAAM,OAAO,SAAS,CAAA,CAAA;AAAA,OACpC;AAEA,MAAQ,OAAA,CAAA,IAAA,CAAK,IAAM,EAAA,UAAA,CAAW,WAAY,CAAA,CAAC,CACtC,CAAA,IAAA,CAAK,IAAM,EAAA,UAAA,CAAW,WAAY,CAAA,CAAC,CACnC,CAAA,IAAA,CAAK,IAAM,EAAA,UAAA,CAAW,WAAY,CAAA,CAAC,CACnC,CAAA,IAAA,CAAK,IAAM,EAAA,UAAA,CAAW,WAAY,CAAA,CAAC,CACnC,CAAA,IAAA,CAAK,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAO,KAAQ,GAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAO,KAAQ,GAAA,OAAO,CAChF,CAAA,IAAA,CAAK,SAAW,EAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAO,OAAW,IAAA,KAAA,CAAA,GAAY,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA,GAAU,CAAC,CAAA,CAC5F,IAAK,CAAA,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,UAAA,GAAa,MAAM,CAAA,CAAA;AAAA,KAEhG;AAEA,IAAU,SAAA,EAAA,CAAA;AAGV,IAAA,SAAS,SAAY,GAAA;AACjB,MAAW,UAAA,CAAA,KAAA,GAAQ,QAAQ,KAAM,CAAA,OAAA,CAAQ,OAAO,uBAAwB,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AACtF,MAAW,UAAA,CAAA,MAAA,GAAS,QAAQ,KAAM,CAAA,OAAA,CAAQ,QAAQ,uBAAwB,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAExF,MAAW,UAAA,CAAA,WAAA,GAAc,EAAE,CAAG,EAAA,UAAA,CAAW,QAAQ,CAAG,EAAA,CAAA,EAAG,UAAW,CAAA,MAAA,GAAS,CAAE,EAAA,CAAA;AAAA,KACjF;;;;;;;;;;;;;;"}