前言
在前端开发中，常常需要用到图片或者图形进行装饰或展示等，bpg-banner-quadrosquare就是一款非常适合用于此类场景的npm包，它支持四边相等的正方形图片以及矩形图片的处理，既可应用于pc端，也可应用于移动端。本篇文章将详细介绍bpg-banner-quadrosquare的使用方法以及如何使用它来实现一些图形展示效果。
安装
npm install bpg-banner-quadrosquare --save
基本用法
在项目中引入bpg-banner-quadrosquare
在项目中引入bpg-banner-quadrosquare：
import QuadroSquare from 'bpg-banner-quadrosquare';
调用QuadroSquare构造函数
调用QuadroSquare构造函数，并传递相应的参数。
const QuadroOptions = {
selector: ".quadro-square", // 选择器
width: 150, // 图片宽度
height: 150, // 图片高度
bgColor: "#555", // 图片背景色
};
const quadro = new QuadroSquare(QuadroOptions);示例代码
示例1
如果我们有一个类似于首页banner的设计需求，需要按比例展示一张图片，并根据图片宽高比动态计算banner宽高以及内部元素的位置，这时我们可以通过bpg-banner-quadrosquare来实现。
-- -------------------- ---- -------
---- -----------------------
---- --------------------- ---
---- -------------------------- ------------------- --------
---- -------- ---
---- -------------------------
---- -------- ---
---- --------------------------------------
---- ------------------------------------------
---- -- ---
---- ----------------------
--------------------
--------------------
------
------
---- -------- --- ---
------
---- -- --- ---
-------- -------------------- ---- -------
--------------- -
--------- ---------
-
------------------- -
--------- ---------
--------- -------
------ -----
----------- ------
-
----------------- -
--------- ---------
---- --
------- --
----- --
------ --
------- -----
------ -----
------- -----
----------- -------
------ -----
-
------------- -
---------- -----
-------------- -----
-
---------------- -
---------- -----
-------------- -----
-
-------------- -
----------- -------
--- -------------------- ---- -------
------ ------------ ---- --------------------------
----- ------- - -
--------- ----------------------
------ -----
------- ----
-------- ---------
--
----- ------ - --- ----------------------
------------------ -- -
----- - ------ ------ - - -----------------
----- --------------- - --------------------------------------------
-- ------------------ -
-------
-
--------------------------- - -------------
---------------------------- - --------------
----- ----------- - ----------------------------------------
----- -------------- - -------------------------------------------
----- ------------ - -----------------------------------------
-- ------------- -- --------------- -- -------------- -
-------
-
--------------------------- - --------- - --------
------------------------------ - --------- - ---------
---------------------------- - --------- - ---------
---示例2
如果我们想要实现一个圆形头像的效果，我们可以使用bpg-banner-quadrosquare处理图片。
<div class="avatar-wrapper">
<div class="avatar-placeholder">
</div>
</div>-- -------------------- ---- -------
--------------- -
--------- ---------
------ ------
------- ------
-
------------------- -
--------- ---------
----- --
------ --
---- --
------- --
------- -----
------ -----
------- -----
---------------- --------
------------------ ----------
--- -------------------- ---- -------
------ ------------ ---- --------------------------
----- ------- - -
--------- ----------------------
------ ----
------- ----
-------- ---------
--
----- ------ - --- ----------------------
---------------- -- -
----- - ------- --- - - -------
----- ------ - ----
----- ------- - ------------ - --
----- ------- - ------------- - --
-----------
----------------
---------------- -------- ------- -- - - ---------
----------------
-----------
--------------------- -- ---
--------------
---总结
bpg-banner-quadrosquare非常适合处理正方形以及矩形图片，支持多个场景应用，通过本文，我们可以学习到如何使用bpg-banner-quadrosquare来实现一些图形展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c85ccdc64669dde4ef9