前端缩放/拉伸图片不变形/畸变！欢迎试用！

2024-04-21 17:11| 来源: 网络整理| 查看: 265

最近工作需求，大屏项目，弹窗用的科技风的图片作为底图，在适配宽屏的时候发现拉伸会造成变形，那些边角拐点处很难看。之前unity项目中有用到九宫格缩放的组件，感觉挺有意思，就自己实现了下。效果如下原始素材：随便找的

如果这张图作为背景直接缩放，在不等比拉伸时必然造成花纹变形。

但是我们发现，x方向有两块区域是纯线条，可以拉伸。纵向区域中间线条也是可以拉伸。那为何不做个功能直接限定用这几块范围作为拉伸区域呢。

一通操作 smart-scale 功能诞生 www.npmjs.com/package/sma…

效果如下

我指定图片的横向的384像素到464像素,820像素到900像素是可以被缩放的,纵向的324像素到440像素范围是可以被缩放的

使用方法图下，以vue3.2为例

npm i smart-scale

import { ref, type Ref, onMounted, onUnmounted } from "vue"; import * as lodash from 'lodash'; import {SmartScale} from 'smart-scale'; const canvasRef: Ref = ref(); const resizeHandle : Ref< (()=> void) | undefined> = ref() onMounted(()=>{ // You need make sure which pixels of picture can be scaled // 你需要明确你的图片哪些像素是可以被放缩的。 // In test.png image, the range of 384 to 464 and 820 to 900 pixels horizontally can be scaled, and the range of 324 to 440 pixels vertically can be scaled. // 在test.png中,横向的384像素到464像素,820像素到900像素是可以被缩放的,纵向的324像素到440像素范围是可以被缩放的。 const smartScale = new SmartScale('/static/img/test.png', [[384,464],[820,900]],[[324,440]],canvasRef.value!) resizeHandle.value = lodash.throttle(()=>{ smartScale.resizeHandle() }, 50) window.addEventListener('resize', resizeHandle.value!) }) onUnmounted(()=>{ window.removeEventListener('resize', resizeHandle.value!) })

如果你需要做动画，你会发现缩放过程有些抖动，这是因为你的canvas缩放和你的resizeHandle函数执行频率不一致导致的。你可以手动将canvas的尺寸变动和resizeHandle函数执行保持一致。这里canvas缩放尺寸变动指的是canvas样式的height和width而不是canvas属性的height,width。

【本文地址】

公司简介

联系我们