1. 第一次加载的时候,设置的图片(Raster)
不显示,刷新之后就可以了?
分析:给图片设置bounds时图片资源还没有加载完成,第二次刷新的时候浏览器有缓存了,所以加载成功。
解决方法:在onLoad中设置尺寸。
let mapBg = new paper.Raster({
//背景图
source: require('@/YDCLOUD/assets/img/newMapManage/mapbg.jpg'),
});
mapBg.onLoad = () => {
mapBg.bounds = this.myPaper.view.bounds;
};
2.设置图片为固定大小的时候会出现闪烁一下(先显示原来的尺寸,后显示想要设置的尺寸)
train.onLoad = () => {
train.rotate(roate)
train.setSize([1.5 * height, height]);
train.bounds.x = x - 1.5 * height
train.bounds.y = y - 0.25 * height
}
train.setSize([2.26 * height, height]);
// train.selected = true
train.bounds.x = x - 1.5 * height
train.bounds.y = y - 0.25 * height
不光再onLaod设置,定义的时候就设置,这样的话就不会闪烁一下。
2. 如何让图片的中线处于我想设置的某个点?
设置他的position
let bottomR = new paper.Raster({
source: require(`地址`),
position: [x, y]
});
let size = type == 'bottom' ? [30, 30] : [50, 50]
bottomR.onLoad = () => {
bottomR.setSize(size);
bottomR.position = [x, y]//让中点位于(x,y)坐标
}
3.想要元素一起动画?
将元素放在一个group或者layer中,给group或者layer设置动画。
4.动画卡顿,onFrame的帧率降低
元素过多,动画会重绘,导致卡顿
创建多个 PaperScope 将需要动画的元素尽可能的剥离放在一个单独的PaperScope中
所有新创建的项目会自动添加为当前激活的层的子元素,通过project.activeLayer访问活跃的层
this.bottommyPaper = new paper.PaperScope()
this.myPaper = new paper.PaperScope()
this.bottommyPaper.setup(this.$refs.myCanvas);
this.myPaper.setup(this.$refs.myCanvas2);
//通过activate更改当前活跃的图层 paperjs只能由一个活跃的图层
this.bottommyPaper.activate()
let bgG = new paper.Group([]); //包括背景图
//通过 project.activeLayer 获取当前活跃的层
this.bottommyPaper.project.activeLayer.addChild(bgG)
-
使用背景图分辨率尺寸比当前画布大太多
在我的项目中用了很多图片,调试用的分辨率是1920*1080,而图片分辨率为 14000 在加载多个大分辨率图片就出现了卡顿的问题,将图片改为1920*1080的图片,卡顿的问题就解决了。
4.让背景图撑满容器?
-
想要保持纵横比
fitBounds(Rectangle,true/false) 第二个参数默认false (其边界适合指定的矩形,而不改变其纵横比)
fitBounds设置为true:
fitBounds设置为false :
-
想要可以拉伸,撑满
设置他的bouds和容器的bouds一样大,会拉伸
具体使用如下:
//设置铺满的图片的公用方法
setfullImage(src) {
let img = new paper.Raster({
source: require(`@/YDCLOUD/assets/img/newMapManage/${
src}.png`),
});
img.onLoad = () => {
img.bounds = this.myPaper.view.bounds;
}
img.bounds = this.myPaper.view.bounds;
return img
},
5.resize