Programim dhe zhvillim, javascript, python, php, html

Si mund të parandaloj shtrembërimin/përkuljen në një formë të rrotulluar me react-native-svg?

Aktualisht po bëj një aplikacion në react-native dhe po përdor react-native-svg për të dhënë forma, d.m.th. drejtkëndësha, elips, etj.

Unë jam duke i përmbajtur këto forma në një komponent kontejner SVG me një raport gjerësi-lartësi 2:1:

  • Gjerësia e formës është një përqindje e gjerësisë së enës.
  • Lartësia e formës është një përqindje e lartësisë së enës.

Aktualisht po has një problem që nuk kam mundur ta zgjidh. Sa herë që rrotulloj një formë, ajo shtrembërohet dhe deformohet në mënyra të çuditshme.

Këtu është një drejtkëndësh me rrotullim 0 gradë dhe gjerësi 60% dhe lartësi 30%:

fut përshkrimin e imazhit këtu

Dhe këtu është i njëjti drejtkëndësh me një rrotullim 71 gradë (gjerësia dhe lartësia janë të njëjta me të mëparshmet):

fut përshkrimin e imazhit këtu

Unë i kam drejtkëndëshat të mbështjellë në një komponent SVG si të tillë: <Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

Unë u përpoqa të ndërroj me elementin preserveAspectRatio të komponentit, por çdo përzgjedhje me të duket se shtrembëron gjerësinë dhe lartësinë e formave.

Të gjithë përbërësit e mi të formës SVG përdorin afërsisht të njëjtin format:

<Rect ... width={ attributes.width } height={ attributes.height } transform={ "rotate(" + attributes.rotation + " " + attributes.x + " " + attributes.y + ")" } />

E kam programuar në atë mënyrë që vargu rotate() të rezultojë në, për shembull: rotate(71, 30, 55).

Ndonje ide?

react-native reactjs svg react-native-android react-native-svg
06.01.2020

  • Çfarë transformimesh të tjera po aplikoni në format tuaja? Kur aplikoni matricat e transformimit, renditja ka rëndësi, d.m.th. scale() rotate() translate() !== translate() rotate() scale(). 06.01.2020
  • Asnjë transformim tjetër nuk po zbatohet në forma. 06.01.2020
  • Ju përmendët gjerësinë 60% dhe lartësinë 30%, që është një shkallëzim. Ndoshta do të ishte më e lehtë për të ndarë kodin tuaj këtu. 06.01.2020
  • Unë kam redaktuar komponentin ‹Rect /› në pyetjen time origjinale për të pasqyruar se si u bë kjo. 06.01.2020

Përgjigjet:


1

Problemi është preserveAspectRatio="none". Ai i thotë shfletuesit të zgjasë SVG-në për t'iu përshtatur gjerësisë dhe lartësisë që keni specifikuar.

viewBox i SVG ka një raport të pamjes katrore (gjerësia dhe lartësia janë të dyja 100). Por duket sikur kontejneri mëmë i SVG nuk e bën këtë. Pra, SVG juaj po shtrihet horizontalisht për t'u përshtatur.

Hiqni preserveAspectRatio="none" dhe ai nuk do të zgjerohet/deformohet më.

06.01.2020
  • Unë ngatërrova me të, dhe kishe të drejtë, ishte preserveAspectRatio. U ngatërrova me gjerësinë dhe lartësinë për ta bërë atë siç duhet dhe funksionoi. Faleminderit. 09.01.2020
    • Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..