Pins
This plugin helps you position elements over Panzoom content so that they stay in the same place after any transformation (zoom, rotate, flip, etc.).
Usage
Include plugin's JS file and optionally include plugin's CSS file.
You are not required to use plugin's CSS file - you can just absolutely position your elements in the center of the container with just a few lines of CSS.
import { Pins } from "@fancyapps/ui/dist/panzoom/panzoom.pins.js";
import "@fancyapps/ui/dist/panzoom/panzoom.pins.css";
Pass Pins
to Panzoom constructor or use plugins
option. This plugin has no options.
const container = document.getElementById("myPanzoom");
const options = {
// Your custom options
};
Panzoom(container, options, { Pins }).init();
Use an inner wrapping element with the class name f-panzoom__wrapper
and place your elements along with your content.
Add data-x
and data-y
data attributes to specify the position above the content. These both attributes can contain numeric values or percentages. The starting point is in the upper left corner.
For example, data-x="0%" data-y="0%"
would place your element in the top left corner of the content, while data-x="50%" data-y="50%"
would place your element in the middle.
<div class="f-panzoom" id="myPanzoom">
<div class="f-panzoom__wrapper">
<div class="f-panzoom__pin" data-x="56%" data-y="60%">
<svg>...</svg>
</div>
<img
class="f-panzoom__content"
src="https://lipsum.app/id/15/1600x1200"
alt="Sample image"
width="1600"
height="1200"
/>
</div>
</div>
Examples
Basic example
Combine
It is also possible to display pins while using the toolbar provided by the Controls plugin.