NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

画布高清处理

Browse Source
This commit is contained in:
icssoa
2025-08-03 16:19:19 +08:00
parent 914114aa11
commit a0682337ad
5 changed files with 56 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cool/utils/device.ts Normal file
View File

@@ -0,0 +1,14 @@
/**
* 获取设备像素比
* @returns 设备像素比
*/
export const getDevicePixelRatio = (): number => {
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
// #ifdef MP
// 微信小程序高清处理
return 3;
// #endif
return dpr;
};

7
cool/utils/index.ts
View File

@@ -1,6 +1,7 @@
export * from "./comm";
export * from "./storage";
export * from "./path";
export * from "./day";
export * from "./parse";
export * from "./device";
export * from "./file";
export * from "./parse";
export * from "./path";
export * from "./storage";

19
uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue
View File

@@ -132,7 +132,7 @@
<script setup lang="ts">
import { computed, ref, reactive, nextTick, getCurrentInstance } from "vue";
import type { PassThroughProps } from "../../types";
import { canvasToPng, parsePt, usePage, uuid } from "@/cool";
import { canvasToPng, getDevicePixelRatio, parsePt, usePage, uuid } from "@/cool";
// 定义遮罩层样式类型
type MaskStyle = {
@@ -1085,24 +1085,25 @@ async function toPng(): Promise<string> {
id: canvasId,
component: proxy,
success: (context: CanvasContext) => {
// 获取设备像素比
const dpr = getDevicePixelRatio();
// 获取绘图上下文
const ctx = context.getContext("2d")!;
// 设置宽高
ctx!.canvas.width = cropBox.width * dpr;
ctx!.canvas.height = cropBox.height * dpr;
// #ifdef APP
ctx!.reset();
// #endif
// #ifndef APP
ctx!.clearRect(0, 0, cropBox.width, cropBox.height);
ctx!.clearRect(0, 0, cropBox.width * dpr, cropBox.height * dpr);
// #endif
// 获取设备像素比
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
// 设置宽高
ctx!.canvas.width = cropBox.width * dpr;
ctx!.canvas.height = cropBox.height * dpr;
// 创建图片
let img: Image;
// 微信小程序环境创建图片

35
uni_modules/cool-ui/components/cl-progress-circle/cl-progress-circle.uvue
View File

@@ -22,7 +22,7 @@
</template>
<script lang="ts" setup>
import { getColor, isDark, parseClass, parsePt, uuid } from "@/cool";
import { getColor, getDevicePixelRatio, isDark, parseClass, parsePt, uuid } from "@/cool";
import { computed, getCurrentInstance, onMounted, ref, watch, type PropType } from "vue";
import type { PassThroughProps } from "../../types";
@@ -89,6 +89,9 @@ const props = defineProps({
const { proxy } = getCurrentInstance()!;
// 获取设备像素比
const dpr = getDevicePixelRatio();
// 透传样式类型定义
type PassThrough = {
className?: string;
@@ -114,25 +117,22 @@ const value = ref(0);
function drawProgress() {
if (drawCtx == null) return;
const centerX = props.size / 2;
const centerY = props.size / 2;
const radius = (props.size - props.strokeWidth) / 2;
const centerX = (props.size / 2) * dpr;
const centerY = (props.size / 2) * dpr;
const radius = ((props.size - props.strokeWidth) / 2) * dpr;
// 清除画布
// #ifdef APP
drawCtx!.reset();
// #endif
// #ifndef APP
drawCtx!.clearRect(0, 0, props.size, props.size);
drawCtx!.clearRect(0, 0, props.size * dpr, props.size * dpr);
// #endif
// 获取设备像素比
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
// #ifndef H5
// 设置缩放比例
drawCtx!.scale(dpr, dpr);
// #endif
// 优化渲染质量
drawCtx!.textBaseline = "middle";
drawCtx!.textAlign = "center";
drawCtx!.miterLimit = 10;
// 保存当前状态
drawCtx!.save();
@@ -143,7 +143,7 @@ function drawProgress() {
drawCtx!.beginPath();
drawCtx!.arc(centerX, centerY, radius, startAngle, endAngle, false);
drawCtx!.strokeStyle = color;
drawCtx!.lineWidth = props.strokeWidth;
drawCtx!.lineWidth = props.strokeWidth * dpr;
drawCtx!.lineCap = "round";
drawCtx!.lineJoin = "round";
drawCtx!.stroke();
@@ -214,13 +214,8 @@ function initCanvas() {
drawCtx = context.getContext("2d")!;
// 设置宽高
drawCtx!.canvas.width = props.size;
drawCtx!.canvas.height = props.size;
// 优化渲染质量
drawCtx!.textBaseline = "middle";
drawCtx!.textAlign = "center";
drawCtx!.miterLimit = 10;
drawCtx!.canvas.width = props.size * dpr;
drawCtx!.canvas.height = props.size * dpr;
// 开始动画
animate(props.value);

32
uni_modules/cool-ui/components/cl-sign/cl-sign.uvue
View File

@@ -16,7 +16,7 @@
</template>
<script lang="ts" setup>
import { canvasToPng, parsePt, uuid } from "@/cool";
import { canvasToPng, getDevicePixelRatio, parsePt, uuid } from "@/cool";
import { computed, getCurrentInstance, nextTick, onMounted, ref, shallowRef, watch } from "vue";
defineOptions({
@@ -77,11 +77,14 @@ const props = defineProps({
});
// 定义事件发射器
const emit = defineEmits(["change"]);
const emit = defineEmits(["change", "clear"]);
// 获取当前实例
const { proxy } = getCurrentInstance()!;
// 获取设备像素比
const dpr = getDevicePixelRatio();
// 触摸点类型
type Point = { x: number; y: number; time: number };
@@ -241,10 +244,10 @@ function onTouchMove(e: TouchEvent) {
// 绘制线条
drawCtx!.beginPath();
drawCtx!.moveTo(lastPoint!.x, lastPoint!.y);
drawCtx!.lineTo(currentPoint.x, currentPoint.y);
drawCtx!.moveTo(lastPoint!.x * dpr, lastPoint!.y * dpr);
drawCtx!.lineTo(currentPoint.x * dpr, currentPoint.y * dpr);
drawCtx!.strokeStyle = props.strokeColor;
drawCtx!.lineWidth = strokeWidth;
drawCtx!.lineWidth = strokeWidth * dpr;
drawCtx!.lineCap = "round";
drawCtx!.lineJoin = "round";
drawCtx!.stroke();
@@ -269,22 +272,14 @@ function clear() {
// #endif
// #ifndef APP
drawCtx!.clearRect(0, 0, props.width, props.height);
// #endif
// 获取设备像素比
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
// #ifndef H5
// 设置缩放比例
drawCtx!.scale(dpr, dpr);
drawCtx!.clearRect(0, 0, props.width * dpr, props.height * dpr);
// #endif
// 填充背景色
drawCtx!.fillStyle = props.backgroundColor;
drawCtx!.fillRect(0, 0, props.width, props.height);
drawCtx!.fillRect(0, 0, props.width * dpr, props.height * dpr);
emit("change");
emit("clear");
}
// 获取签名图片
@@ -300,10 +295,9 @@ function initCanvas() {
success: (context: CanvasContext) => {
// 获取绘图上下文
drawCtx = context.getContext("2d")!;
// 设置宽高
drawCtx!.canvas.width = props.width;
drawCtx!.canvas.height = props.height;
drawCtx!.canvas.width = props.width * dpr;
drawCtx!.canvas.height = props.height * dpr;
// 优化渲染质量
drawCtx!.textBaseline = "middle";