There are excess shadows when konva draw 1px line,window.devicePixelRatio =1.25 ?

Caesar454905970 commented 1 year ago

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Rect Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
    const width=400
    const height=400

  const ratio = window.devicePixelRatio 
  console.log(ratio)
  //let ratio =1.25

    //第一步：创建一个State舞台
    const stage= new Konva.Stage({
      container:'container',
      width,
      height,
      draggable: false,
    })

    //第二步：创建一个Layer图层
    const layer=new Konva.Layer()

    //第三步：创建一个 Line 线条
    const redLine =new Konva.Line({
      points: [5, 100.5, 200, 100.5], //这里是四个点的坐标
      // points: pints_arr.value, //这里是四个点的坐标
      stroke: '#fc0303',
      strokeWidth:1,
    })
     redLine.move({
        x: 0,
        y: 0
      });

      //第四步：将矩形添加到图层中
      layer.add(redLine)

      //第五步：将图层添加到舞台中
      stage.add(layer)
      console.log("/第四步：将矩形添加到图层中")

    </script>
  </body>
</html>

enter image description here

strong text There are excess shadows when konva draw 1px line,window.devicePixelRatio =1.25 ?

Caesar454905970 commented 1 year ago

微信图片_20220919114935

lavrton commented 1 year ago

I think it is not a shadow. It is subpixel drawing and Konva can't control it. Will you have different result if you set Konva.pixelRatio = 2 or Konva.pixelRatio = 1?

Caesar454905970 commented 1 year ago

layer.getCanvas().setPixelRatio(2) or 1,It's the same problem

konvajs / konva

There are excess shadows when konva draw 1px line,window.devicePixelRatio =1.25 ? #1403