paperjs开发过程中遇到的问题

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

paperjs开发过程中遇到的问题

猜你喜欢