javascript - 如何使用CSS动态重新定位画布元素(How can I re-position a canvas element dynamically with CSS)

Question

I've written a piece of code in React and with mouse-click, I position a canvas element, I change 3 style property of the canvas element with mouse-click.

(我已经在React中编写了一段代码，然后单击鼠标，放置了画布元素，然后单击鼠标更改了画布元素的3个style属性。)

When the page refreshes I am getting this canvas elements position from the database and try to change it again according to data coming from the database however it doesnt change any property but if i try to change 1 property it changes, what might be causing this?

(当页面刷新时，我正在从数据库获取此canvas元素的位置，并尝试根据来自数据库的数据再次对其进行更改，但是它不会更改任何属性，但是如果我尝试更改1个属性，它会更改，这可能是什么原因引起的？)

Here is the relevant part of my code:

(这是我的代码的相关部分：)

    function click(e) {
      if(upgrade_status){
        if ( material[x_cord + "" + y_cord] == null) {
          if(neededmat>totalmats){
            //
          }else{
            setStyleProp('left', x_cord*90+30);
            setStyleProp('top', y_cord*120+150);
            setStyleProp('backgroundColor', "white");
          }
        }else{
          if(mat ===source){
            setStyleProp('left', x_cord*90+30);
            setStyleProp('top', y_cord*120+150);
            setStyleProp('backgroundColor', "white");
            }
            if(neededmat>totalmats){
              //
            }else{
              //
            }
          }else{
            //errormessage1
          }
        }
      }else{
          //errormessage2
      }
    }


    function Economy() {
      ref = useRef();
      ref2 = useRef();
      ref_yazi = useRef();
      const kullanici =useTimes()
      console.log("ka?kere")
      setStyleProp = (prop, value) => {
        setStyle({
          ...style,
          [prop]: value
        })
      }
      const [style, setStyle] = useState({
        position: "absolute",
        border: "0px solid red",
        zIndex: "3",
        width: "35px",
        height: "25px",
        backgroundColor:"transparent"
      });
      useInterval(() => {
        setCount(count + 1);
      }, 1000);
      let [count, setCount] = useState(0);
      update_details=kullanici.minebuildtime;

     if ('undefined' !== typeof(update_details) && update_details !== "0") {
      let d = new Date();
      let currenttime = d.getTime();
      timing_mat='';
      timing_upgrade_value = '';
      timing_mats_values = update_details.split("-");
      [timing_cord_x,timing_cord_y,timing_mat,timing_upgrade_value,timing_time]= timing_mats_values;
      let time_difference=timing_time-currenttime;
      if(time_difference<0){
        if(timing_upgrade_value ==="1"){
          database.add(timing_cord_x,timing_cord_y,timing_mat,currentcordsandvalues,db,userUid,timing_time); 
        }else{
          ctx.clearRect(timing_cord_x * 90, timing_cord_y * 120, 90, 120);
          database.update(timing_cord_x,timing_cord_y,timing_mat,timing_upgrade_value,currentcordsandvalues,db,userUid,timing_time);
        }
        ctx_yazi.clearRect(timing_cord_x, timing_cord_y, 100, 30);
        if(upgrade_status === false){
          setStyleProp("backgroundColor", "transparent");
        }
        upgrade_status=true;
      }else{
        ctx_yazi.clearRect(timing_cord_x, timing_cord_y, 100, 30);
        if(upgrade_status!==false){
          //this is the part that doesnt work properly, only works if i use 
          //setStyleProp once
          setStyleProp('position', 'absolute');
          setStyleProp('backgroundColor', 'blue');
          setStyleProp('left', timing_cord_x*90+30);
          setStyleProp('top', timing_cord_y*120+150);
          ctx_yazi.font = "14px Arial";
          ctx_yazi.fillStyle = "black";
          ctx_yazi.textAlign = "bottom";
        }
        ctx_yazi.fillText(Math.trunc(time_difference/1000), 5, 17);
        upgrade_status=false; 
      }
    }else{
      upgrade_status=true;
    }
return ( 
      <>
        {user ?  (
          <div className="screens">
              <canvas
                  ref={ref2}
                  className="buildings" 
                  width={800}
                  height={120}
                  onClick={e => {

                  }}
              />
              <canvas
                  ref={ref}
                  className="gameScreen" 
                  width={800}
                  height={600}
                  onClick={e => {

                  }}
              />
              <canvas
                  ref={ref_yazi}
                  style={style}
                  width={30}
                  height={25}
              />
        </div>
        ) : (<div>Please login</div>)}
    </>
  );
}

  ask by Faruk translate from so

Answer 1

等待大神答复