发芽的洪！　︵ᵟຶ
( `д´)ジ

目前一个很大的问题是如何实现将div元素放进canvas画布里面，并跟随canvas的移动或者缩放改变，并且与此同时还要求这个div元素本身拥有的事件不变，即可以在canvas画布上继续操作div元素

天哪，光想想就头疼，canvas画布的文档上这种内容是一个字都没有啊( ﾟ∀。)

有肥哥给我推荐了phaser插件，但是它那个example只给了js代码，我都不知道要怎么复刻或者调试( ﾟ∀。)

不过我看了一下，这个插件或许能满足我的要求，打算明天多花点时间搞搞(ゝ∀･)

今天的进度主要就是一个小插件的成功使用与功能实现，晚上一直在看phaser文档，看得我头疼( ﾟ∀。)

说起来，国内有什么解答编程问题的论坛吗，百度时经常能看到某某网站搬的国外论坛对话

直接用TZ上谷歌搜

>>No.55960934
是本肥推荐的| ω・´)

关于phaser有什么问题的话尽情问（虽然感觉phaser不是这个问题的最优解，但是基本可以满足需求）

>>No.55961203
好耶，谢谢高技术力肥哥！

那肥哥，我有这样一些需求，但是我看了好几个example都有点不满足我的需求，如果您能够为我解答，那真是感激不尽！

1.我希望我能用鼠标拖动，放大以及缩小canvas画布，我知道这个过程可以通过操作camera实现，但是我不知道要怎么把鼠标的事件(抓取然后移动，滚动滚轮)转换成camera可以读取的controls

2.我想将动态生成的div元素插入进画布，使其能够被上述操作同时进行修改，即其可以随着画布的拖动(或者说camera的移动)而移动，随着画布的缩放(camera视角的改变？)而同步改变大小，最关键的是我希望这个div元素的事件仍然有效

我看了一些插入dom元素的例子，但它们最后似乎都不会在html里存在了，我不知道这要如何解决，因为我已经完成了的功能都是基于html的id功能实现的

给肥哥jp

>>No.55961638
1.phaser为所有对象提供了 on(event,func(){}) 的监听函数，你可以对鼠标操作进行监听，具体的可以查阅相关文档

2.camera移动视角的时候dom元素会一起移动/缩放，这个不用担心；
关于动态添加div，官方例子没有太多涉及，你可以参考https://newdocs.phaser.io/docs/3.60.0-beta.19/Phaser.GameObjects.DOMElement
这里可以自定义div的style和innertext

对于dom元素没有载入html的问题，，我没有过多研究，按理说是添加为了canvas的子元素，你可以试试在phaser对象配置中把type改为CANVAS，不知道有没有效果

如果必须要求id，，那phaser可能不太合适了，这要看肥肥用id具体实现了什么呢？

>>No.55961638
好消息，我又仔细研究了phaser对dom的支持，结论是完全满足肥哥的需求
你可以用如下代码向phaser添加元素：
a=this.add.dom(0,0,"div");

你可以用如下代码获取该元素jq对象：
$(a)

这样，你可以通过jquery像操作普通元素一样改变a的id，text，style，而且该dom元素还可以与镜头一起移动/缩放

这应该是最优解了，有问题可以继续问

>>No.55963288
不好意思，打错了(つд⊂)
第二个语句应该是$(a.node)

正好最近也在学前端，直接进行一个阅的订ᕕ( ᐛ )ᕗ

>>No.55963288
活菩萨(´ﾟДﾟ`)

其实你可以问ChatGPT

>>No.56000682
chatgpt这东西有时候它不会就一本正经瞎编，不一定能获得正确答案

话说回来,为什么会有往canvas里面插div的奇怪要求,画布的归画布,dom的归dom,这样后期好改一点

>>No.56080530
可我就是想要dom可以和画布一起放大缩小移动(つд⊂)

之前是考虑网页内嵌，把dom放进去作为内网页的元素，但是内网页响应不知道为什么很慢，内网页的镜头移动也不知道该怎么做，于是就来求助肥哥们了( ´∀`)

不过我这几天狂啃phaser，也有一点觉得不大适合，一方面是画布对dom元素的支持有点差，即使有api支持写起来也很累(つд⊂)

>>No.56087154
玩手机被老师训了( ´∀`)

另一方面是这个phaser的文档是真不好啃啊，示例代码也不好用，资源分开装真的不大能理解，不过示例确实很多呢(　ﾟ 3ﾟ)

Phaser看了三天三夜做出来还是一坨答辩，放弃了(;´ヮ`)7

问了问老师，老师说最好就使用dom元素作画布，这样的之前的功能都能继续使用

但问题是这个dom元素画布是不是有点难搞(　↺ω↺)

目前实现了
移动(子元素可以独立移动，画布拖动带着子元素一起动)
放大缩小(通过zoom实现的，好省事哦)
子元素添加

但问题出在画布大小上，我想要实现那种画布可以无限延伸，用户可以一直拖一直拖一直拖那种感觉

一开始想的是长宽修改，但是width和height扩大只能使得画布向右or下扩大( ﾟπ。)

然后就发现一件很糟糕的事情，div的元素定位似乎都是从左上角的那个点出发的，一旦修改了这个点的位置，那么div内的元素也会跟着移动，最终就出现了明明向左/上拓展了画布，但是内部的元素完全没有移动的尴尬局面( ﾟ∀。)7

现在觉得html真是太不好用啦，我现在转unity还来得及吗( ›´ω`‹ )

>>No.56213576
咨询了经常使用设计类软件的朋友，说是可以整一个设置画布大小的功能(*ﾟーﾟ)但是肥肥还是想试试这么做(つд⊂)感觉很厉害

其实目前最主要的问题就是如何让dom元素向左/上方扩大，同时还不会影响到子元素的位置(*ﾟーﾟ)

想了想，目前拟订的解决办法有：

1.提供一张自定义大小的画布，画布的大小可以缩放

问题：jqui提供的缩放部件还是会导致内部的元素一起移动！
解决：缩放结束后修改其内元素的位置使其位置不变
问题2：当其内元素过多时，十分影响性能

2.提供一张很大的画布，支持拖动移动，拖动后按照拖动距离增大画布的长/宽

问题：增大长/宽只能拓展右/下，如果用户一直往左上移动还是没用
解决：让元素的位置始终相对于body文档而不是画布
问题：怎么做到？目前看来只要是父元素内的子元素，那么其位置就一定受父元素的左上点影响

3.换个开发环境|-` )

>>No.56214640
有点想法了，整理思路还是有效的

一个最外层div做画布，一个中间div做容器，容器内就是各种小dom元素

最外层大小修改以后，将中间层的位置修正，看看有没有效果( ´∀`)

( ;´д`)玩了两天游戏我好堕落

最终决定用定大小画布来解决了，一方面是做嵌套，无限画布的话切换性能占用过高，另一方面就是定大小画布实现起来更简单

只不过配套的就得做画布尺寸修改和画布定义了，这个纯纯地堆工作量感觉还好(ﾉ)`ω´(ヾ)

另外老师推荐我说最好把所有功能都列出来，感觉有点麻烦，但是一想到如果采用堆屎法后期维护会加倍麻烦(;´ヮ`)7抽点时间做个小文档吧ᕕ( ﾟ∀。)ᕗ