Блог

Я создаю этап Konva в режиме начальной загрузки react. при использовании текста из библиотеки Konva он не перетаскивается из своего реального положения, которое я установил, но имеет произвольное положение перетаскивания, которое зависит от размера шрифта. Вот ссылка на рабочую демонстрацию. https://nimb.ws/MPeyZj

Вот мой текстовый список: { x: 100, y: 100, текст: topTextForMeme, Размер шрифта: topFontSizeForMeme, выбрано: true, семейство шрифтов: «Arial», заливка: topColorForMeme, ширина штриха: 1,5, обводка: «#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>