如何使用CSS动态重新定位画布元素

问题描述 投票:0回答:1

我已经在React中编写了一段代码,并单击鼠标,放置了画布元素,并通过单击鼠标更改了画布元素的3个样式属性。当页面刷新时,我正在从数据库获取此canvas元素的位置,并尝试根据来自数据库的数据再次对其进行更改,但是它不会更改任何属性,但是如果我尝试更改1个属性,它会更改,这可能是什么原因引起的?

这是我的代码的相关部分:

    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>)}
    </>
  );
}
javascript html reactjs
1个回答
0
投票

好吧,经过一些努力,我设法进行了一些更改来使其正常工作。首先,我意识到经济功能下的setStyleProp函数仅更改样式的最后一个属性,因此我将函数setStyleProp更改为接受以下3个变量,

setStyleProp = (prop1, value1,prop2,value2,prop3,value3) => {
    setStyle({
      ...style,
      [prop1]: value1,
      [prop2]: value2,
      [prop3]: value3,
    })
  }

然后我像这样在经济函数下更改了函数调用;

setStyleProp('top', timing_cord_y*120+150,'left', timing_cord_x*90+30,'backgroundColor','white');

并且它的工作与预期的一样。我不了解的怪异部分我没有更改onClick事件上的函数调用,它们仍然像下面一样工作

setStyleProp('left', x_cord*90+30);
setStyleProp('top', y_cord*120+150);
setStyleProp('backgroundColor', "white");
© www.soinside.com 2019 - 2024. All rights reserved.