Je souhaite afficher une partie de l'image sur la toile à l'aide de fabricjs (comme sprite et background-position en html, css). Par défaut avec fabricjs, il s'affiche en haut à gauche de l'image. Mais je veux afficher une partie de l'image pas du haut, à gauche.

example

Par exemple : je veux afficher la partie de bordure noire de cette image sur la toile.

Je ne vois aucune propriété ou fonction dans fabricjs qui puisse faire cela. Avez-vous des suggestions? Merci

1
binbin 8 févr. 2020 à 21:21

1 réponse

Meilleure réponse

Avez-vous essayé cropX/cropY ? Combinez-les avec le réglage de la largeur et de la hauteur :

const canvas = new fabric.Canvas('c')
const url = 'https://i.stack.imgur.com/qVhbV.jpg'
const imgEl = document.createElement('img')
imgEl.src = url
imgEl.onload = () => {
  const img = new fabric.Image(imgEl)
  img.set({
    cropX: 70,
    cropY: 140,
    width: 200,
    height: 150,
  })
  canvas.add(img)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
1
shkaper 9 févr. 2020 à 01:16