日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

createjs中shape的属性regX和regY

發布時間：2023/12/2 编程问答 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 createjs中shape的属性regX和regY 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

官方文檔說regX和regY是圖形與注冊點的距離。

那么注冊點是什么呢？

  • 我理解注冊點就是圖形的x/y對應的點
  • 圖形動效的原點就是注冊點

    • 如果修改圖形的regX和regY值圖形在畫布上的位置是會被改變的，但是注冊點其實并沒有被改變。因為圖形的x/y值并沒有被改變。注冊點如果是(100, 100)修改regX/regY之后，注冊點還是(100, 100)。

    示例

    繪制一個正方形寬高都是100。然后設置這個正方形的(x, y)為(100, 100)。

    <body onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/javascript"> function init() {let stage = new createjs.Stage('game')let shape = new createjs.Shape()shape.graphics.beginFill('red').drawRect(0, 0, 100, 100)shape.x = 100shape.y = 100stage.addChild(shape)stage.update() } </script> </body>

    對于這個正方形來說注冊點就在(100, 100)這個位置。這個位置是相對于正方形的父元素的，這個例子中父元素是stage。如果相對于形狀左上角的話注冊點的坐標就是(0, 0)。

    讓圖形動起來：

    <body> <script src="../../EaselJS-1.0.0/lib/easeljs.js"></script> <body onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/javascript"> function init() {let stage = new createjs.Stage('game')let shape = new createjs.Shape()shape.graphics.beginFill('red').drawRect(0, 0, 100, 100)shape.x = 100shape.y = 100stage.addChild(shape)stage.update()// 動起來流暢點createjs.Ticker.setFPS(60)createjs.Ticker.addEventListener('tick', () => {shape.rotation += 1stage.update()}) } </script> </body>

    從動圖中可看到動畫的原點是圖形的左上角也就是圖形的注冊點位置(100, 100)這個點。

    修改regX和regY屬性

    <body> <script src="../../EaselJS-1.0.0/lib/easeljs.js"></script> <body onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/javascript"> function init() {let stage = new createjs.Stage('game')let shape = new createjs.Shape()shape.graphics.beginFill('red').drawRect(0, 0, 100, 100)shape.x = 100shape.y = 100// 修改regX regY屬性改變正方形位置shape.regX = 50shape.regY = 50stage.addChild(shape)stage.update() } </script> </body>

    修改屬性regX和regY之后圖形的位置發生了變化，相比于上面的圖片，圖形更加靠近stage的左上角。這時候圖形距離stage的距離應該是(50, 50)，但是圖形的注冊點還是(100, 100)并沒有被regX和regY的值改變。

    讓圖形動起來：

    <body> <script src="../../EaselJS-1.0.0/lib/easeljs.js"></script> <body onload="init();"><canvas id="game" width="500" height="700" style="background-color: black"></canvas> </body><script type="text/javascript"> function init() {let stage = new createjs.Stage('game')let shape = new createjs.Shape()shape.graphics.beginFill('red').drawRect(0, 0, 100, 100)shape.x = 100shape.y = 100// 修改regX regY屬性改變正方形位置shape.regX = 50shape.regY = 50stage.addChild(shape)stage.update()// 動起來流暢點createjs.Ticker.setFPS(60)createjs.Ticker.addEventListener('tick', () => {shape.rotation += 1stage.update()}) } </script> </body>

    從下面的動圖中可以看出來，動畫的原點還是在(100, 100)這個位置，注冊點并沒有改變。

    注：所以注冊點并不總是和圖形左上角重疊

    參考

    Shape Class

    Easeljs之regX/regY詳解

    總結

    以上是生活随笔為你收集整理的createjs中shape的属性regX和regY的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。