Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Caesar454905970 opened this issue Sep 19, 2022 · 3 comments
Open

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

Caesar454905970 opened this issue Sep 19, 2022 · 3 comments

Comments

@Caesar454905970
Copy link 

<!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
Copy link
Author

微信图片_20220919114935

@lavrton
Copy link
Member

lavrton commented Sep 20, 2022

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lavrton @Caesar454905970