Top

ray框架中组件canvas传参到引用该组件的页面，

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
18320328341
Posts: 8

  • Tuya MiniApp IDE 版本信息：关于中查看
    • App 应用版本信息： 设置-关于中进行查看~
    • @ray-js/ray, @ray-js/panel-sdk的版本（如使用ray开Image发）在package.json查看~
    • 移动设备信息：手机型号及系统
    • 相关代码：可复现该问题的代码内容
    • 日志信息：错误日志或 IDE 运行日志等~
    • 问题描述（复现步骤）:

ray框架中，目前我在page的diy页面中引入一个组件components的my-canvas组件，这个组件是用来实现画布canvas功能，之后操作画布会改变一个值，我看官方文档在这个组件的rjs文件使用this.instance.callMethod('animationPlay', value);类似的方法可以将该值传到组件的js文件中，目前我需要将这个值传到引用这个组件的diy页面中rjs或者tsx文件中获取，我的需求就是在我操作这个画布时改变值时，能够实时将这个值渲染在diy页面上

如效果图，希望在在拉动画布进度条时能够将其中显示的那个值实时显示在下面方框哪里，因为拉动进度条时，相关的canvas操作的方法是在组件的my-canvas里面，但操作时值也是在里面，虽然是在diy文件中引入了该组件，但是无法在diy中拿到这个变化值，所以无法实时显示在下面方框那里

Code: Select all

- 预期结果：

- 实际结果：
Last edited by 18320328341 on 2024年 Dec 17日 11:04, edited 2 times in total.
Tags:
已关闭
求助
18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

page/diy/index.tsx
import Render from './index.rjs';
import Chart from "@/components/my-canvas/"
export function Diy() {

const [canvasData, setCanvasData] = useState(
{
progress: 60,
progressbarColor: '#ED4040',
page: 'temp',
}
);

const ctx = usePageInstance();
usePageEvent('onReady', function () {
const compInst = ctx.selectComponent('#canvasId');
console.log(compInst)
console.log(compInst.data.value)
const render = new Render(compInst);
render.getDOMByRJS();
});
return (
<>
<Chart key={activeTab} title={activeTab} info={canvasData} onChange={handleProgressChange} id="canvasId" type="2d" />
</>
);
}

export default Diy;

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

page/diy/index.rjs
const LOG_PREFIX = '页面中的rjs: ';

export default Render({
document: null,
x: 111,
getDOMByRJS() {
return getCanvasById('chart', this).then((res) => {
// console.log(LOG_PREFIX, 'getDOMByRJS 1', chart);
});
},
getDocument() {
console.log(LOG_PREFIX, 'getDocument', this.document);
},

});

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

components/my-canvas/index.tyml
<view id="box">
<canvas canvas-id="chart" id="chart" type="2d" style="width: 360rpx; height: 360rpx;" bindtouchstart="handleStart" bindmousedownt="handleStart" bindtouchmove="handleMove" bindmousemove="handleMouseMove" />
</view>

components/my-canvas/index.js
import Render from './index.rjs'

Component({

data: {
value: 20,
},


lifetimes: {

Code: Select all

attached(props) {
  this.rjs = new Render(this);
},
ready: function () {
  this.setData({
    value: this.data.info.progress
  })
  this.rjs.drawCircle('chart', this.data.info.progress, this.data.info.progressbarColor, this.data.info.page);
},

},

methods: {
handleStart(e){
const query = ty.createSelectorQuery();
const positon = query.select('#box').boundingClientRect();
this.rjs.handleStart(e);
},
handleMouseMove(e){
this.rjs.handleMouseMove(e,this.data.info.page);
},
handleMove(e){
this.rjs.handleMove(e, this.data.info.page);
},
animationPlay: function (val) {
this.setData({
value: val
})
this.data.info.progress = val
this.triggerEvent('onProgressChange', { val });
// console.log(this.data)
// this.data.watchChange(val)
},


},
})

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

components/my-canvas/index.rjs
export default Render({

handleMove(e, page){
const touch = e.changedTouches[0] || e.touches[0]
this.changeValue(touch, page)
},

changeValue(touch, page){
const x = Math.round(touch.x - this.centerX)
const y = Math.round(touch.y - this.centerY)
let radian = Math.atan2(y, x);
if (radian < 0) {
radian += 2 * Math.PI
} else if(radian < 0.5Math.PI){
radian = Math.abs(radian) + 2 * Math.PI
}
if(radian < this.startAngle-0.2 && radian > this.endAngle+0.2){
this.isTouchMove = false
} else {
if(!this.isTouchMove) return;
const progress = Number(((radian - this.startAngle)/ this.totalAngle).toFixed(2))
const value = Math.min(100,Math.max(0,Math.round(progress100)))
this.drawCircle('chart', value, '#ED4040', page)
this.instance.callMethod('animationPlay', value);
}
}

});

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

比如我在canvas中触发handleMove这个方法，之后会执行changeValue这个方法重新计算出const value = Math.min(100,Math.max(0,Math.round(progress100)))这个值，然后我将这个值this.instance.callMethod('animationPlay', value);传回其js文件中，请问我怎么实时在page/diy页面中怎么实时获取到这个值，因为我需要用到这个值

xiaoqi
Posts: 20

Re: ray框架中组件canvas传参到引用该组件的页面，

在你的 js组件内将事件传递出去就可以了
animationPlay(value){
this.triggerEvent('animation', value);
}
外层组件：
<dd
...
bindanimation={onAnimationChange}
/>

xiaoqi
Posts: 20

Re: ray框架中组件canvas传参到引用该组件的页面，

需要注意的是在js文件内你的逻辑都还属于小程序的范畴，当你通过this.triggerEvent事件传递给外层 React框架下的page 时，在dom更新时还会多一层react框架的编译过程。
所以如果你在拖拽出去的回调会实时更新React的state导致视图层的更新时会出现卡顿的现象
建议如果是实时展示更新dom的逻辑放在你的js文件内书写 也就是小程序的组件内书写而不是在react组件内

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

您好，感谢的解答，不过你那种传递事件的方法我用过了，我是想在
page/diy/index.tsx
import Render from './index.rjs';
import Chart from "@/components/my-canvas/"
export function Diy() {

const [canvasData, setCanvasData] = useState(
{
progress: 60,
progressbarColor: '#ED4040',
page: 'temp',
}
);

const ctx = usePageInstance();
usePageEvent('onReady', function () {
const compInst = ctx.selectComponent('#canvasId');
console.log(compInst)
console.log(compInst.data.value)
const render = new Render(compInst);
render.getDOMByRJS();
});
return (
<>
<Chart key={activeTab} title={activeTab} info={canvasData} onChange={handleProgressChange} id="canvasId" type="2d" />
<View className={styles.diy_option_text}>--{canvasData.progress}{devInfo.schema[9].property.unit}--</View>
</>
);
}

export default Diy;比如 <View className={styles.diy_option_text}>--{canvasData.progress}{devInfo.schema[9].property.unit}--</View>，我是想在操作canvas画布时也就是这个Chart组件，触发components/my-canvas/index.js中的方法handleMove，而这里的方法是在components/my-canvas/index.rjs中定义的，调用handleMove这个方法会获取到进度位置，然后通过调用this.changeValue(touch, page)算出进度值，之后我在changeValue这个方法中this.instance.callMethod('animationPlay', value);通过这里将这个值传回到了components/my-canvas/index.js文件中，因为我想在page/diy/index.tsx中的diy_option_text这个类名盒子显示这个值，也就是只要有拖动就可以就这个值显示在page/diy/index.tsx，不知道我是不是理解错你的意思，我觉得你还是在components/my-canvas/index.tyml这里进行绑定，但是我不需要在这里显示，这里只是为了显示和操作canvas

18320328341
Posts: 8

Re: ray框架中组件canvas传参到引用该组件的页面，

components/my-canvas/index.js
import Render from './index.rjs'

Component({

data: {
value: 20,
},

lifetimes: {

代码： 全选

attached(props) {
this.rjs = new Render(this);
},
ready: function () {
this.setData({
value: this.data.info.progress
})
this.rjs.drawCircle('chart', this.data.info.progress, this.data.info.progressbarColor, this.data.info.page);
},
},

methods: {
handleStart(e){
const query = ty.createSelectorQuery();
const positon = query.select('#box').boundingClientRect();
this.rjs.handleStart(e);
},
handleMouseMove(e){
this.rjs.handleMouseMove(e,this.data.info.page);
},
handleMove(e){
this.rjs.handleMove(e, this.data.info.page);
},
animationPlay: function (val) {
this.setData({
value: val
})
this.data.info.progress = val
this.triggerEvent('onProgressChange', { val }); //这里这里这里这里这里这里这里这里这里
// console.log(this.data)
// this.data.watchChange(val)
},

},
})
你看，我这里就试着去用过this.triggerEvent('onProgressChange', { val }); 去将val值传到
page/diy/index.tsx
import Render from './index.rjs';
import Chart from "@/components/my-canvas/"
export function Diy() {

const [canvasData, setCanvasData] = useState(
{
progress: 60,
progressbarColor: '#ED4040',
page: 'temp',
}
);

const ctx = usePageInstance();
usePageEvent('onReady', function () {
const compInst = ctx.selectComponent('#canvasId');
console.log(compInst)
console.log(compInst.data.value)
const render = new Render(compInst);
render.getDOMByRJS();
});
return (
<>
<Chart key={activeTab} title={activeTab} info={canvasData} onChange={onProgressChange} id="canvasId" type="2d" />
</>
);
}

export default Diy;

中<Chart key={activeTab} title={activeTab} info={canvasData} onChange={onProgressChange} id="canvasId" type="2d" /> 这里绑定接收，是接收不到的

Post Reply