Repository: pyqtgraph/pyqtgraph

Issue:
ColorBarItem does not draw ticks correctly when exporting scaled image
<!-- In the following, please describe your issue in detail! -->
<!-- If some of the sections do not apply, just remove them. -->
### Short description
<!-- This should summarize the issue. -->
I've spotted two issues with the new ColorBarItem that involves the ticks of the AxisItems when the plot is exported at a resolution different from the screen resolution:

1. The ticks of the not-used axes are drawn as 1-px wide dots
2. The ticks of the used axis (the color bar ticks) are not aligned with the colorbar

This issue is present for both PNG and SVG exporters (did not test the others), so it's probably not exporter-related.

### Code to reproduce
<!-- Please provide a minimal working example that reproduces the issue in the code block below.
     Ideally, this should be a full example someone else could run without additional setup. -->

Run the following code, then export the entire plot as PNG and make sure to choose a resolution that is twice the original resolution (e.g. width=1200).

```python
import numpy as np
import pyqtgraph as pg
from pyqtgraph.graphicsItems.GradientEditorItem import Gradients

pg.setConfigOption("background", "w")
pg.setConfigOption("foreground", "k")


if __name__ == '__main__':
    app = pg.mkQApp()

    pw = pg.plot()

    cm = pg.ColorMap(*zip(*Gradients["viridis"]["ticks"]))
    
    # use ColorBarItem
    bar = pg.ColorBarItem(cmap=cm, values=(0,20),interactive=False)
    pw.plotItem.layout.setColumnFixedWidth(4, 5) # enforce some space to axis on the left
    pw.plotItem.layout.addItem(bar,2,5)

    app.exec()
```

### Expected behavior
<!-- What should happen? -->
There should only be ticks on the right side and the ticks should not extend outside of the colorbar.


### Real behavior
<!-- What happens? -->
1. The top, left, and bottom axes show axes ticks. (red arrows)
2. The right axis extends out of the axis (blue arrows)
(zoomed in and annotated with gimp)
![image](https://user-images.githubusercontent.com/2853022/123337851-216bb300-d548-11eb-84d1-db8a1146874f.png)

## Ideas
The first issue (red arrows) can be resolved by disabling ticks altogether for the left, top, and bottom axes by adding
`axis.setTicks([])` in this `else` case: https://github.com/pyqtgraph/pyqtgraph/blob/3fbb4f6b026b838293c9cbfc026a03dc47d62257/pyqtgraph/graphicsItems/ColorBarItem.py#L95-L96


### Tested environment(s)

 * PyQtGraph version: 0.12.1
 * Qt Python binding: 'PyQt5 5.15.1 Qt 5.15.1'
 * Python version: 3.8.5 (default, May 27 2021, 13:30:53)
 * NumPy version: '1.18.5'
 * Operating system: Ubuntu 20.04
 * Installation method: pip### Additional context

### Additional context
https://github.com/ZELLMECHANIK-DRESDEN/ShapeOut2/issues/87


Discussion:
>The ticks of the used axis (the color bar ticks) are not aligned with the colorbar

This seems to have been fixed by #1845, likely by the commenting out of the following line.
```
+        # p.translate(0.5,0)  ## resolves some damn pixel ambiguity
```

>This issue is present for both PNG and SVG exporters (did not test the others), so it's probably not exporter-related.
>make sure to choose a resolution that is twice the original

On a hidpi display, the effect is visible w/o needing to export. With a screen-scaling factor of 2, the "0.5 pixel" works out to 1 full physical pixel. 

Would you mind testing out master branch to see if it has fixed this sub-issue?
@pijyoi Yes, the second sub-issue is already fixed in master.

Resolving patch:
diff --git a/pyqtgraph/graphicsItems/ColorBarItem.py b/pyqtgraph/graphicsItems/ColorBarItem.py
--- a/pyqtgraph/graphicsItems/ColorBarItem.py
+++ b/pyqtgraph/graphicsItems/ColorBarItem.py
@@ -85,7 +85,7 @@ def __init__(self, values=(0,1), width=25, cmap=None, label=None,
         for key in ['left','right','top','bottom']:
             self.showAxis(key)
             axis = self.getAxis(key)
-            axis.setZValue(1)
+            axis.setZValue(0.5)
             # select main axis:
             if self.horizontal and key == 'bottom':
                 self.axis = axis
@@ -93,7 +93,8 @@ def __init__(self, values=(0,1), width=25, cmap=None, label=None,
                 self.axis = axis
                 self.axis.setWidth(45)
             else: # show other axes to create frame
-                axis.setStyle( showValues=False, tickLength=0 )
+                axis.setTicks( [] )
+                axis.setStyle( showValues=False )
         self.axis.setStyle( showValues=True )
         self.axis.unlinkFromView()
         self.axis.setRange( self.values[0], self.values[1] )


Test patch: