HarmonyOS 鸿蒙Next Canvas 在画布画线时，如何将整个路径水平平移

参考示例
import { display } from '@kit.ArkUI'
class ConnectionPoint {
x:number
y:number
radius:number
constructor(x:number,y:number,radius:number) {
this.x = x
this.y = y
this.radius = radius
}
}
@Entry
@Component
struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private connectionPointList:Array<ConnectionPoint> = []
private  sss:number = 0
private  y:number = 0
scroller: Scroller = new Scroller()
@State canvasWidth:number = 0
private  screenWidth:number = 0
aboutToAppear(): void {
display.getAllDisplays((err, data) => {
this.canvasWidth =  this.screenWidth = data[0].width
})

<span class="hljs-keyword">this</span>.connectionPointList.push(<span class="hljs-keyword">new</span> ConnectionPoint(<span class="hljs-number">150</span>, <span class="hljs-number">190</span>, <span class="hljs-number">5</span>))
<span class="hljs-keyword">this</span>.connectionPointList.push(<span class="hljs-keyword">new</span> ConnectionPoint(<span class="hljs-number">200</span>, <span class="hljs-number">150</span>, <span class="hljs-number">5</span>))
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Scroll(this.scroller){
Canvas(this.context)
.width(this.canvasWidth)
.height(‘100%’)
.backgroundColor(’#ffff00’)
.onReady(() =>{
this.draw()
})
}
.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Horizontal) // 滚动方向水平
.height(‘70%’)
.width(‘100%’)
  Text(<span class="hljs-string">'添加'</span>).onClick(()=&gt;{
    <span class="hljs-keyword">this</span>.sss++
    <span class="hljs-keyword">let</span> x = <span class="hljs-number">200</span> + <span class="hljs-number">50</span>*<span class="hljs-keyword">this</span>.sss

    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.y&lt;<span class="hljs-number">50</span>) {
      <span class="hljs-keyword">this</span>.y = <span class="hljs-number">190</span> + <span class="hljs-number">50</span>* <span class="hljs-keyword">this</span>.sss
    }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.y&gt;=<span class="hljs-number">50</span>&amp;&amp; <span class="hljs-keyword">this</span>.y&lt;=<span class="hljs-number">300</span>) {
      <span class="hljs-keyword">this</span>.y = <span class="hljs-number">190</span> + <span class="hljs-number">10</span>* <span class="hljs-keyword">this</span>.sss
    }<span class="hljs-keyword">else</span> {
      <span class="hljs-keyword">this</span>.y = <span class="hljs-number">200</span>
    }
    <span class="hljs-keyword">this</span>.canvasWidth = <span class="hljs-keyword">this</span>.screenWidth+x
    <span class="hljs-keyword">this</span>.connectionPointList.push(<span class="hljs-keyword">new</span> ConnectionPoint(x, <span class="hljs-keyword">this</span>.y, <span class="hljs-number">5</span>))
    <span class="hljs-keyword">this</span>.draw()
    <span class="hljs-keyword">this</span>.scroller.scrollTo({xOffset:x-<span class="hljs-number">300</span>,yOffset:<span class="hljs-keyword">this</span>.y})
  })
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)
}
draw(){
this.context.beginPath()
this.context.lineWidth = 2
this.context.lineJoin = ‘round’
this.context.moveTo(50, 230)
this.connectionPointList.forEach(element => {
this.context.lineTo(element.x, element.y)
this.context.arc(element.x, element.y, element.radius, 0, 6.28)
});
<span class="hljs-keyword">this</span>.context.stroke()
}
}