leaferjs / leafer-ui

一款好用的 Canvas 渲染引擎,革新的体验。高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑,前端开发必备~
https://www.leaferjs.com
MIT License
2.38k stars 82 forks source link

dynamic change zoom min or max limit invalid #138

Closed chenyuyu118 closed 3 months ago

chenyuyu118 commented 5 months ago
app.tree = app.addLeafer(
        {
          wheel: {
            zoomMode: 'mouse'
          }
    })
    app.sky = app.addLeafer({ type: 'draw', usePartRender: false })

    app.editor = new Editor({
      skewable: false,
      boxSelect: false
    })
    app.sky.add(app.editor)

    const box = new Box({ x: 0, y: 0, width: app.width, height: app.height, fill: 'red',
      dragBounds: { x: - app.width, y: - app.height, width: app.width * 3, height: app.height * 3 },
      draggable: true, editable: false })
    app.tree.add(box);

    let image = new Image({
      url: localUrl(src),
      draggable: false,
      editable: false,
    });

    image.on(ImageEvent.LOADED, (ev: ImageEvent) => {
      // compute scale
      let scale = 1 / Math.min(ev.image.width / app.width, ev.image.height / app.height);
      app.tree.config.zoom = {
        min: scale,
        max: ev.image.width * ev.image.height / 1000
      };
      image.scale = scale
    })

    app.tree.on(ZoomEvent.END, (ev:ZoomEvent) => {
      console.log(app.tree.config.zoom)
     console.log(app.tree.scale)
    })

    box.add(image)

image

leaferjs commented 5 months ago

交互配置统一在App上控制了,需要修改app.config.zoom = {...}