小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我要在canvas上画坐标,但是如何获取canvas的尺寸(高度和宽度)呢?
12 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
问题应该与flex有关,iOS系统的flex实现确实有点不一样。麻烦提供iOS系统版本和flex样式定义,谢谢。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
这个是用flex布局的吗?
@zsp 麻烦详细描述一下问题
canvas的尺寸是可以设置的啊,参见canvas文档。
从截图可以看出,同一代码在Android上页面不会scroll,canvas被下面的view挤压高度变化;而IOS上canvas仍保持设置的高度,页面会自动scroll
另外,不知道为何Android手机在(0,0)位置画Rect会上移?
--------------------------------------------------
测试手机
iphone SE: IOS 10.3.3
小米Note: Android 6.0.1
<!--test.wxml-->
<view class="graph-view">
<view class="title"/>
<canvas canvas-id="myCanvas" class="my-canvas"/>
<view class="table">
<view class="total-view">
合计: {{totalAmount}}
</view>
<view wx:for="{{series}}" wx:key="category">
<view class="tr left" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.name}}</view>
<view class="td">{{item.data}}</view>
<view class="tr right" wx:else>
/* test.wxss */
.graph-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0px 0px;
}
.title {
height: 50px;
background-color: greenyellow
.my-canvas {
height: 300px;
padding: 0px;
background-color: yellow
.table {
border: 0px solid darkgray;
background-color: #7d9da9;
.total-view {
flex-direction: row;
justify-content: center;
background-color: #74b0c7;
color: #fff;
padding: 8px 0px;
.tr {
width: 49%;
padding: 10rpx 0rpx;
border-bottom: 1px solid darkgray;
.left {
float: left;
border-right: 1px solid darkgray;
.right {
float: right;
.td {
width: 50%;
text-align: center;
// test.js
Page({
/**
* 页面的初始数据
*/
data: {
series: [
{ name: '类别1', data: 100 },
{ name: '类别2', data: 100 },
{ name: '类别3', data: 100 },
{ name: '类别4', data: 100 },
{ name: '类别5', data: 100 },
{ name: '类别6', data: 100 },
{ name: '类别7', data: 100 },
{ name: '类别8', data: 100 },
{ name: '类别9', data: 100 },
{ name: '类别10', data: 100 },
{ name: '类别11', data: 100 },
{ name: '类别12', data: 100 },
{ name: '类别13', data: 100 },
{ name: '类别14', data: 100 },
],
totalAmount: 1400,
},
* 生命周期函数--监听页面加载
onLoad: function (options) {
* 生命周期函数--监听页面初次渲染完成
onReady: function () {
* 生命周期函数--监听页面显示
onShow: function () {
var context = wx.createContext();
context.setFillStyle("#99d9ea")
//x, y, widht, height
context.rect(0, 0, 100, 100);
context.fill();
wx.drawCanvas({
canvasId: 'myCanvas',
actions: context.getActions(),
})
* 生命周期函数--监听页面隐藏
onHide: function () {
* 生命周期函数--监听页面卸载
onUnload: function () {
* 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
* 页面上拉触底事件的处理函数
onReachBottom: function () {
* 用户点击右上角分享
onShareAppMessage: function () {
Android上的运行截图:
iphone上的运行截图:
这里没法添加附件?
是的
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
问题应该与flex有关,iOS系统的flex实现确实有点不一样。麻烦提供iOS系统版本和flex样式定义,谢谢。
这个是用flex布局的吗?
@zsp 麻烦详细描述一下问题
canvas的尺寸是可以设置的啊,参见canvas文档。
从截图可以看出,同一代码在Android上页面不会scroll,canvas被下面的view挤压高度变化;而IOS上canvas仍保持设置的高度,页面会自动scroll
另外,不知道为何Android手机在(0,0)位置画Rect会上移?
--------------------------------------------------
测试手机
iphone SE: IOS 10.3.3
小米Note: Android 6.0.1
<!--test.wxml-->
<view class="graph-view">
<view class="title"/>
<canvas canvas-id="myCanvas" class="my-canvas"/>
<view class="table">
<view class="total-view">
合计: {{totalAmount}}
</view>
<view wx:for="{{series}}" wx:key="category">
<view class="tr left" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.name}}</view>
<view class="td">{{item.data}}</view>
</view>
<view class="tr right" wx:else>
<view class="td">{{item.name}}</view>
<view class="td">{{item.data}}</view>
</view>
</view>
</view>
</view>
/* test.wxss */
.graph-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0px 0px;
}
.title {
width: 100%;
height: 50px;
background-color: greenyellow
}
.my-canvas {
width: 100%;
height: 300px;
padding: 0px;
background-color: yellow
}
.table {
width: 100%;
border: 0px solid darkgray;
background-color: #7d9da9;
}
.total-view {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background-color: #74b0c7;
color: #fff;
padding: 8px 0px;
}
.tr {
display: flex;
width: 49%;
justify-content: center;
color: #fff;
align-items: center;
padding: 10rpx 0rpx;
border-bottom: 1px solid darkgray;
}
.left {
float: left;
border-right: 1px solid darkgray;
}
.right {
float: right;
}
.td {
width: 50%;
justify-content: center;
text-align: center;
}
// test.js
Page({
/**
* 页面的初始数据
*/
data: {
series: [
{ name: '类别1', data: 100 },
{ name: '类别2', data: 100 },
{ name: '类别3', data: 100 },
{ name: '类别4', data: 100 },
{ name: '类别5', data: 100 },
{ name: '类别6', data: 100 },
{ name: '类别7', data: 100 },
{ name: '类别8', data: 100 },
{ name: '类别9', data: 100 },
{ name: '类别10', data: 100 },
{ name: '类别11', data: 100 },
{ name: '类别12', data: 100 },
{ name: '类别13', data: 100 },
{ name: '类别14', data: 100 },
],
totalAmount: 1400,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var context = wx.createContext();
context.setFillStyle("#99d9ea")
//x, y, widht, height
context.rect(0, 0, 100, 100);
context.fill();
wx.drawCanvas({
canvasId: 'myCanvas',
actions: context.getActions(),
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Android上的运行截图:
iphone上的运行截图:
这里没法添加附件?
是的