OnionlUI

Appearance

PixelImage 像素图片 ​

PixelImage组件用于创建像素风格的图片效果，可以将普通图片转换为像素化的复古风格。

基础用法 ​

通过传入图片地址，即可创建一个基础的像素化图片。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex items-center justify-center space-x-4">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
    />
    <ol-pixel-image
      src="/vue.png"
      width="200"
      height="auto"
    />
  </div>
</template>

自定义间距 ​

你可以通过pixelGap属性来控制像素块之间的间距。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex  items-center space-x-4 justify-center">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-gap="2"
    />

    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-gap="4"
    />
  </div>
</template>

自定义像素大小 ​

你可以通过pixelSize属性来控制像素化的程度，数值越大像素块越大。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex items-center justify-center space-x-4">
    <ol-pixel-image
      src="/vite.png"
      width="200"
      height="auto"
      :pixel-size="2"
    />
    <ol-pixel-image
      src="/vue.png"
      width="200"
      height="auto"
      :pixel-size="1"
    />
  </div>
</template>

自定义视窗大小 ​

通过viewport-width和viewport-height属性，可以自定义视窗大小。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex items-center justify-center">
    <ol-pixel-image
      src="/vue.png"
      :viewport-width="200"
      :viewport-height="200"
      :pixel-size="4"
    />
  </div>
</template>

属性 ​

属性名说明类型默认值
width图片宽度number200
height图片高度number200
pixelSize像素块大小number4
src图片地址string-
pixelGap像素块间距number4

注意事项 ​

  1. 组件会继承原生img标签的所有属性。
  2. 为了获得最佳效果，建议使用分辨率适中的图片。
  3. pixelSize值越大，图片像素化程度越高，建议根据实际需求调整。
  4. 组件暂不支持在线图片，需要本地图片。