Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(renderLogo): updated props of logo #156

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(renderLogo): updated props of logo #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 10 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ Discussion: https://discord.gg/RvFM97v
| - | - |
| <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/android.png" width="240"> | <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/ios.png" width="240"> |


| QRCode rectangle logo |
| - |
| <img src="./screenshot/qrcode_rectanglelogo.png" width="140"> |

## Installation

Install dependency packages
Expand Down Expand Up @@ -115,10 +120,13 @@ enableLinearGradient | false | enables or disables linear gradient
linearGradient | ['rgb(255,0,0)','rgb(0,255,255)'] | array of 2 rgb colors used to create the linear gradient
gradientDirection| [170,0,0,0] | the direction of the linear gradient
logo | null | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize | 20% of size | Size of the imprinted logo. Bigger logo = less error correction in QR code
logoWidth | 20% of size | Width of the imprinted logo. Bigger logo = less error correction in QR code
logoHeight | 20% of size | Height of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColor | backgroundColor | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin | 2 | logo's distance to its wrapper
logoMarginX | 2 | logo's horizontal distance to its wrapper
logoMarginY | 2 | logo's vertical distance to its wrapper
logoBorderRadius | 0 | the border-radius of logo image (Android is not supported)
logoPreserveAspectRatio | 'xMidYMid slice' | the preserveAspectRatio of logo image. If you want to change the zoom property of the image, please see the [preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) property for image in SVG.
quietZone | 0 | quiet zone around the qr in pixels (useful when saving image to gallery)
getRef | null | Get SVG ref for further usage
ecl | 'M' | Error correction level
Expand Down
Binary file added screenshot/qrcode_rectanglelogo.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 40 additions & 29 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,51 +15,56 @@ import transformMatrixIntoPath from './transformMatrixIntoPath'
const renderLogo = ({
size,
logo,
logoSize,
logoWidth,
logoHeight,
logoBackgroundColor,
logoMargin,
logoBorderRadius
logoMarginX,
logoMarginY,
logoBorderRadius,
logoPreserveAspectRatio
}) => {
const logoPosition = (size - logoSize - logoMargin * 2) / 2
const logoBackgroundSize = logoSize + logoMargin * 2
const logoBackgroundBorderRadius =
logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
const logoPositionX = (size - logoWidth - logoMarginX * 2) / 2
const logoPositionY = (size - logoHeight - logoMarginY * 2) / 2
const logoBackgroundSizeWidth = logoWidth + logoMarginX * 2
const logoBackgroundSizeHeight = logoHeight + logoMarginY * 2
const logoBackgroundBorderRadiusX = logoBorderRadius + (logoMarginX / logoWidth) * logoBorderRadius
const logoBackgroundBorderRadiusY = logoBorderRadius + (logoMarginY / logoHeight) * logoBorderRadius

return (
<G x={logoPosition} y={logoPosition}>
<G x={logoPositionX} y={logoPositionY}>
<Defs>
<ClipPath id='clip-logo-background'>
<ClipPath id="clip-logo-background">
<Rect
width={logoBackgroundSize}
height={logoBackgroundSize}
rx={logoBackgroundBorderRadius}
ry={logoBackgroundBorderRadius}
width={logoBackgroundSizeWidth}
height={logoBackgroundSizeHeight}
rx={logoBackgroundBorderRadiusX}
ry={logoBackgroundBorderRadiusY}
/>
</ClipPath>
<ClipPath id='clip-logo'>
<ClipPath id="clip-logo">
<Rect
width={logoSize}
height={logoSize}
width={logoWidth}
height={logoHeight}
rx={logoBorderRadius}
ry={logoBorderRadius}
/>
</ClipPath>
</Defs>
<G>
<Rect
width={logoBackgroundSize}
height={logoBackgroundSize}
width={logoBackgroundSizeWidth}
height={logoBackgroundSizeHeight}
fill={logoBackgroundColor}
clipPath='url(#clip-logo-background)'
clipPath="url(#clip-logo-background)"
/>
</G>
<G x={logoMargin} y={logoMargin}>
<G x={logoMarginX} y={logoMarginY}>
<Image
width={logoSize}
height={logoSize}
preserveAspectRatio='xMidYMid slice'
width={logoWidth}
height={logoHeight}
preserveAspectRatio={logoPreserveAspectRatio}
href={logo}
clipPath='url(#clip-logo)'
clipPath="url(#clip-logo)"
/>
</G>
</G>
Expand All @@ -72,10 +77,13 @@ const QRCode = ({
color = 'black',
backgroundColor = 'white',
logo,
logoSize = size * 0.2,
logoWidth = size * 0.2,
logoHeight = size * 0.2,
logoBackgroundColor = 'transparent',
logoMargin = 2,
logoMarginX = 2,
logoMarginY = 2,
logoBorderRadius = 0,
logoPreserveAspectRatio = 'xMidYMid slice',
quietZone = 0,
enableLinearGradient = false,
gradientDirection = ['0%', '0%', '100%', '100%'],
Expand Down Expand Up @@ -148,10 +156,13 @@ const QRCode = ({
renderLogo({
size,
logo,
logoSize,
logoWidth,
logoHeight,
logoBackgroundColor,
logoMargin,
logoBorderRadius
logoMarginX,
logoMarginY,
logoBorderRadius,
logoPreserveAspectRatio
})}
</Svg>
)
Expand Down