为什么潘趣特没有在苗条中被禁用？

Question

在项目中，我正在尝试两个Pan缩放库。摇变焦工作得很好，但是当我尝试pause或dispose摇变焦时，它不起作用了。我尝试过多种方法来解决这个问题，但没有找到任何可行的解决方案。

我已经创建了一个画布，然后将pan缩放添加到父元素中。变焦器工作，但暂停或破坏不工作。

App.svelte

    <div id="editor">
        <canvas id="canvas" />
    </div>

Toolbar.svelte

    import panzoom from "panzoom";

    function setActive(toolId) {
        const instance = panzoom(document.getElementById("editor"));

        if (toolId === "choose-color") {
            instance.resume();
        } else {
            instance.dispose();
        }
    }

Answer 1

.pause()、.resume()或.dispose()是在一个实例上调用的方法，该实例是通过调用const instance = panzoom(element)创建的，因为您在setActive()中执行此操作，每次都要创建一个新实例.

下面是一个使用动作初始化泛缩放并将instance作为支柱传递给子组件以使其可用的版本。为了暂时禁用摇摄，我会在pause/resume之间切换

REPL

App.svelte

<script>
    import panzoom from 'panzoom'
    import Toolbar from './Toolbar.svelte'

    let instance

    function initPanzoom(node) {
        instance = panzoom(node)
    }
</script>

<Toolbar {instance} />

<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 519 139">
    <g use:initPanzoom>
        ...
    </g>
</svg>

<style>
    svg {
        width: 100%;
        height: 100%;
    }
</style>

Toolbar.svelte

<script>
    export let instance
</script>

<div>
    <button on:click={() => instance.pause()}>pause</button>
    <button on:click={() => instance.resume()}>resume</button>
    <button on:click={() => instance.dispose()}>dispose</button>
</div>