第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 react-konva 上重置拖動畫布的位置?

如何在 react-konva 上重置拖動畫布的位置?

達(dá)令說 2022-10-27 14:14:22
我有一個 react konva 項目,您可以在其中將圖像加載到畫布中,然后四處拖動畫布。如果您加載不同的圖像,則它會出現(xiàn)在上一張圖像被拖動到的位置。我猜是否有任何方法可以重置舞臺上的這個“拖動”位置(可拖動組件)。由于我正在使用反應(yīng),我唯一能想到的就是重新渲染整個組件,這現(xiàn)在不是問題,但我想有替代方案。我之所以讓舞臺而不是圖像本身可拖動,是因為我有一系列想要與圖像一起移動的點(diǎn)。當(dāng)然,我可以將點(diǎn)和圖像都添加到組中,但這會引入一些可能不值得的復(fù)雜性。我現(xiàn)在擁有的代碼如下所示:  <Stage draggable width={canvasWidth} height={canvasHeight}>        <Layer ref={layerRef}>          {imageInfo.loaded && (            <Image              image={image}              onClick={addPoint}              onTap={addPoint}              width={imageInfo.targetWidth}              height={imageInfo.targetHeight}            />          )}          {points.map((p, idx) => (            <Circle              key={pointId(p)}              x={p.x}              y={p.y}              fill={color}              radius={size}              onClick={() => setPoints(points => removePos(idx, points))}            />          ))}        </Layer>      </Stage>
查看完整描述

1 回答

?
皈依舞

TA貢獻(xiàn)1851條經(jīng)驗 獲得超3個贊

如果您想在加載新圖像時重置舞臺位置,您可以:


ref如果訪問,請手動重置舞臺的位置

const App = () => {

  const stageRef = React.useRef();

  const [image] useImage(url);


  // every time an images is changed we should reset position of the stage

  React.useEffect(() => {

     stageRef.current.position({ x: 0, y: 0});

  }, [image])


  return <Stage ref={stageRef} draggable width={canvasWidth} height={canvasHeight} />;

};

或者您可以重置狀態(tài)中的位置(并且保存位置更改dragmove或dragend事件很重要):

const App = () => {

  const [pos, setPos] = React.useState({x : 0, y: 0 });


  const handleDragEnd = (e) => {

     setPos({

       x: e.target.x(),

       y: e.target.y(),

     });

  };


  // every time an images is changed we should reset position of the stage

  React.useEffect(() => {

     setPos({ x: 0, y: 0});

  }, [image])


  return <Stage onDragEnd={handleDragEnd} draggable width={canvasWidth} height={canvasHeight} />;

};


查看完整回答
反對 回復(fù) 2022-10-27
  • 1 回答
  • 0 關(guān)注
  • 264 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號