该用例是圣诞节“刮刮”卡，用户需要在图像上滑动才能显示内容。当调整窗口大小或旋转手机时， Canvas 会重新绘制。我当前的代码如下:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Division Raster</title>
<script type="text/javascript" src="wp-content/themes/generatepress_child/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">
// Based on 'JPEG Raster' by Jonathan Puckey:
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
// Create a raster item using the image with id='mona'
var raster = new Raster('mona');
// Make the raster invisible:
raster.visible = true;
raster.position = view.center;
var lastPos = view.center;
function moveHandler(event) {
if (lastPos.getDistance(event.point) < 1)
return;
lastPos = event.point;
var size = this.bounds.size.clone();
var isLandscape = size.width > size.height;
// If the path is in landscape orientation, we're going to
// split the path horizontally, otherwise vertically:
size /= isLandscape ? [2, 1] : [1, 2];
if (size.ceil().width > 10) {
var path = new Path.Rectangle({
point: this.bounds.topLeft.floor(),
size: size.ceil(),
onMouseMove: moveHandler
});
path.fillColor = raster.getAverageColor(path);
var path = new Path.Rectangle({
point: isLandscape
? this.bounds.topCenter.ceil()
: this.bounds.leftCenter.ceil(),
size: size.floor(),
onMouseMove: moveHandler
});
path.fillColor = raster.getAverageColor(path);
}
this.remove();
}
function onResize(event) {
project.activeLayer.removeChildren();
// Transform the raster so that it fills the bounding rectangle
// of the view:
raster.fitBounds(view.bounds, true);
// Create a path that fills the view, and fill it with
// the average color of the raster:
new Path.Rectangle({
rectangle: view.bounds,
fillColor: raster.getAverageColor(view.bounds),
onMouseMove: moveHandler
});
}
</script>
<style type="text/css" id="wp-custom-css">
#canvas{
background: center center url(/web.jpg);
width:100%;
height:100vh;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#cc{
max-width:2560px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
} </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<img width="1024" height="1024" id="mona" style="display: none;" src="/web.jpg">
</body>
</html>
有什么方法可以修复初始 Canvas 大小，这样“抓取”的结果就不会丢失？
最佳答案
您的问题出在 onResize每次调整窗口大小时都会调用该函数，并且基本上会重置您的绘图。
resize <canvas> 上的属性元素也是问题的一部分，因为它确保每次调整窗口大小时都会更新 Canvas 大小。
就你而言，我认为你想摆脱这些。
这是fiddle根据您的代码进行改编，将其转换为不响应调整大小事件的静态绘图。
<html>
<head>
<meta charset="UTF-8">
<title>Division Raster</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">
// Load image then init.
var raster = new Raster({
source: 'http://assets.paperjs.org/images/marilyn.jpg',
crossOrigin: 'anonymous',
onLoad: init
});
function init() {
// Make image fill the whole canvas.
raster.fitBounds(view.bounds, true);
var lastPos = view.center;
function moveHandler(event) {
if (lastPos.getDistance(event.point) < 1) {
return;
}
lastPos = event.point;
var size = this.bounds.size.clone();
var isLandscape = size.width > size.height;
// If the path is in landscape orientation, we're going to
// split the path horizontally, otherwise vertically:
size /= isLandscape ? [2, 1] : [1, 2];
if (size.ceil().width > 10) {
var path = new Path.Rectangle({
point: this.bounds.topLeft.floor(),
size: size.ceil(),
onMouseMove: moveHandler
});
path.fillColor = raster.getAverageColor(path);
var path = new Path.Rectangle({
point: isLandscape
? this.bounds.topCenter.ceil()
: this.bounds.leftCenter.ceil(),
size: size.floor(),
onMouseMove: moveHandler
});
path.fillColor = raster.getAverageColor(path);
}
this.remove();
}
// Create a path that fills the view, and fill it with
// the average color of the raster:
new Path.Rectangle({
rectangle: view.bounds,
fillColor: raster.getAverageColor(view.bounds),
onMouseMove: moveHandler
});
}
</script>
<style type="text/css">
canvas {
width : 100vw;
height : 100vh;
position : absolute;
top : 0;
left : 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
关于javascript - 在 PaperJS 中调整屏幕大小和移动设备旋转后禁用重绘 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59247389/