Problemas encontrados durante el proceso de desarrollo de paperjs

1. Cuando se carga por primera vez, la imagen configurada （Raster）no se muestra. ¿Está bien después de actualizar?

分析：给图片设置bounds时图片资源还没有加载完成，第二次刷新的时候浏览器有缓存了，所以加载成功。
解决方法：在onLoad中设置尺寸。

 let mapBg = new paper.Raster({
    
    //背景图
         source: require('@/YDCLOUD/assets/img/newMapManage/mapbg.jpg'),
   });
mapBg.onLoad = () => {
    
    
       mapBg.bounds = this.myPaper.view.bounds;
 };

2. Al configurar la imagen en un tamaño fijo, parpadeará (primero se muestra el tamaño original y luego se muestra el tamaño que desea configurar)

  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

No solo configúrelo en Laod, sino que también configúrelo al definirlo para que no parpadee.

2. ¿Cómo hacer que la línea central de la imagen esté en un punto determinado que quiero establecer?

设置他的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. ¿Quieres elementos para animar juntos?

将元素放在一个group或者layer中，给group或者layer设置动画。

4. La animación se bloquea y la velocidad de fotogramas de onFrame se reduce.

元素过多，动画会重绘，导致卡顿
创建多个 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)

• Utilice una imagen de fondo con una resolución demasiado grande que la del lienzo actual

   在我的项目中用了很多图片，调试用的分辨率是1920*1080，而图片分辨率为 14000 
    在加载多个大分辨率图片就出现了卡顿的问题，将图片改为1920*1080的图片，卡顿的问题就解决了。
  

4. ¿Dejar que la imagen de fondo llene el contenedor?

• quiero mantener la relación de aspecto

   fitBounds(Rectangle,true/false) 第二个参数默认false   （其边界适合指定的矩形，而不改变其纵横比）
  

fitBounds se establece en verdadero:

fitBounds se establece en falso:

• Quiero poder estirarme y llenarme.

    	设置他的bouds和容器的bouds一样大，会拉伸
  

El uso específico es el siguiente:

 	//设置铺满的图片的公用方法
        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.cambiar el tamaño