Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" resize>
</canvas>
<script type="text/javascript">
$(document).ready(function () {
paper.setup($('#canvas').get(0))
var textGroup = new paper.Group()
var object = new paper.Path.Rectangle({
size: 20,
fillColor: 'blue',
position: paper.view.center,
radius: 1,
applyMatrix: false,
parent: textGroup
})
var text = new paper.PointText({
point: object.position,
content: 'The text',
fillColor: 'blue',
fontWeight: 'bold',
fontSize: 2,
parent: textGroup,
justification: 'center'
})
var textRect = new paper.Path.Rectangle({
size: text.bounds,
fillColor: 'whitesmoke',
position: text.position,
opacity: 0,
})
paper.view.onMouseDrag = function(event){
paper.project.activeLayer.position = event.point
}
$("#canvas" ).on( 'wheel', function(e) {
var scale = 1
var scaleSteps = 0.05
if (e.originalEvent.wheelDelta > 0){
// console.log("down")
scale += scaleSteps
} else{
// console.log("up")
scale -= scaleSteps
}
if (paper.project.activeLayer.bounds.size.width > 200){
animateState(true, e)
} else{
animateState(false, e)
}
paper.project.activeLayer.scale(scale)
})
function animateState(isZoomed, e){
if (isZoomed){
object.fillColor = 'whitesmoke'
text.opacity = 1
textRect.opacity = 0
} else{
object.fillColor = 'blue'
text.opacity = 0
textRect.opacity = 1
}
}
})
</script>
</body>
</html>
