Support for multiple zoompinch components on same page

Open mohanzeal opened this issue 6 months ago • 0 comments

I wanted to use this awesome library for zooming my product webpages. Does this support adding multiple zoompinch components to the same page?

eg:

<body>
<zoompinch
  ref="zoompinchRef"
  v-model:transform="transform"
  :width="1536"
  :height="2048"
  :offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
  :min-scale="0.1"
  :max-scale="10"
  :rotation="true"
  :bounds="false"
  mouse
  touch
  wheel
  gesture
>
  <template #canvas>
    <img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
  </template>
  <template #matrix="{ composePoint }">
    <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
      <!-- This circle will stick to the center of the canvas -->
      <circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
    </svg>
  </template>
</zoompinch>

<zoompinch
  ref="zoompinchRef"
  v-model:transform="transform"
  :width="1536"
  :height="2048"
  :offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
  :min-scale="0.1"
  :max-scale="10"
  :rotation="true"
  :bounds="false"
  mouse
  touch
  wheel
  gesture
>
  <template #canvas>
    <img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
  </template>
  <template #matrix="{ composePoint }">
    <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
      <!-- This circle will stick to the center of the canvas -->
      <circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
    </svg>
  </template>
</zoompinch>
</body>

is this supported? As you are using variables for the style attribute its not retaining different width,height,..etc css variables.

Oct 13 '25 13:10 mohanzeal