reactjs - konva react.js 文本可拖动无法正常工作

Question

我正在以 react-bootstrap 模式创建 Konva Stage。在使用来自 Konva 库的文本时，它不会从我设置的真实位置拖动，而是随机拖动位置随字体大小而变化。这是工作演示的链接。 https://nimb.ws/MPeyZj

这是我的文本列表：{ x: 100, y: 100, text: topTextForMeme, fontSize: topFontSizeForMeme, selected: true, fontFamily: "Arial", fill: topColorForMeme, strokeWidth: 1.5, stroke: "#000000", },

<Modal
      isOpen={modalIsOpencreatememe}
      onAfterOpen={afterOpenModalcreatememe}
      onRequestClose={closeModalcreatememe}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <div className="imagememe-modal create-meme-image">
        <h2
          className="modal-heading"
          ref={(_subtitle) => (subtitle = _subtitle)}
        ></h2>
        <button className="cross-btn" onClick={closeModalcreatememe}>
          <img className="cross-image" src="./images/cross.png" />
        </button>

        <div>
          {backgroundImage != null ? (
            <Stage
              width={850}
              height={450}
              ref={(node) => {
                stageRef = node;
              }}
            >
              <Layer>
                <KonvaImage image={backgroundImage}></KonvaImage>
                {textList.map((text) => (
                  <Text {...text} draggable />
                ))}
              </Layer>
            </Stage>
          ) : (
            ""
          )}
        </div>

        <div className="custom-audio-file-type">
          {/* <input className='image' type="file" accept='image/*' onChange={onChangeOfMemeImage} /> */}
          <input
            className="image"
            type="file"
            accept="image/*"
            onChange={addBackground}
          />
          <p className="upload-image text-center">
            <a href="">
              <i className="fa fa-picture-o" aria-hidden="true"></i> Upload
              your own image
            </a>
          </p>
        </div>
        <div
          className=" media-edit-btn-container text-right"
          style={{ marginTop: 10, marginRight: 20 }}
        >
          <p class="edit-writing-clear-box">
            <span
              className="edit-writing-clear"
              onClick={() => deleteMedia()}
            >
              <img
                src="./images/icon_trash.svg"
                width="20"
                className="mr-1"
              ></img>{" "}
              Clear
            </span>
          </p>
        </div>

        {/* <p className="upload-image text-center"><a href=""><i className="fa fa-picture-o" aria-hidden="true"></i> Upload your own image</a></p> */}
        <div className="create-meme-top-text">
          <textarea
            className="form-control"
            rows="1"
            id="comment"
            placeholder="Top Text"
            value={topTextForMeme}
            onChange={(event) => {
              updateTopOfMeme(event, "text");
            }}
          ></textarea>
          {/* <input className="form-control" type="text" name="toptext" id="comment" placeholder="Top Text" onChange={(txt) => setState({ toptext: txt })} /> */}
          <h6>
            Select Color{" "}
            <span>
              <InputColor
                initialValue="#000000"
                value={topColorForMeme}
                onChange={(event) => {
                  updateTopOfMeme(event, "color");
                }}
                placement="right"
              />
            </span>
          </h6>
        </div>
        <div className="create-meme-top-select-filled">
          <div className="edit-video-fafa">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
            <select
              className="form-control form-control-lg"
              value={topFontSizeForMeme}
              onChange={(event) => {
                updateTopOfMeme(event, "size");
              }}
            >
              <option>Select font size</option>
              <option value="30">30px</option>
              <option value="32">32px</option>
              <option value="34">34px</option>
              <option value="36">36px</option>
              <option value="38">38px</option>
              <option value="40">40px</option>
              <option value="42">42px</option>
              <option value="44">44px</option>
              <option value="46">46px</option>
              <option value="48">48px</option>
              <option value="50">50px</option>
              <option value="52">52px</option>
              <option value="54">54px</option>
              <option value="56">56px</option>
              <option value="58">58px</option>
              <option value="60">60px</option>
            </select>
          </div>
          <div className="edit-video-fafa">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
            <select
              className="form-control form-control-lg"
              value={topFontFamilyForMeme}
              onChange={(event) => {
                updateTopOfMeme(event, "font_family");
              }}
            >
              <option>Select font family</option>
              <option value="arial">Arial</option>
              <option value="ariblk">Ariblk</option>
              <option value="courier">Courier</option>
              <option value="impact">Impact</option>
              <option value="lucida_console">Lucida Console</option>
              <option value="lucida">Lucida</option>
              <option value="montserrat_regular">Montserrat Regular</option>
              <option value="trebuc">Trebuc</option>
            </select>
          </div>
        </div>

        <button onClick={generateMeme} className="btn  generate-meme">
          Generate Meme
        </button>
      </div>
    </Modal>