Closed chenyuyu118 closed 3 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)
交互配置统一在App上控制了,需要修改app.config.zoom = {...}