[英]React-Native-Canvas Not Drawing Entire Rectangle
While I was making another app, I ran into an issue with react-native-canvas
, so I created this minimal project.在制作另一个应用程序时,我遇到了react-native-canvas
的问题,所以我创建了这个最小的项目。 The issue is that the WebView is much smaller than the Canvas and does not fill up the entire canvas when it should.问题是 WebView 比 Canvas 小得多,并且没有填满整个 canvas。 Here is the code (very similar to the example code ):这是代码(与示例代码非常相似):
import React, { Component } from 'react';
import { View } from "react-native"
import Canvas from 'react-native-canvas';
export default class App extends Component {
handleCanvas = (canvas) => {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'purple';
ctx.fillRect(0, 0, 350, 700);
}
render() {
return (
<View style={{
width: 350,
height: 700
}}>
<Canvas ref={this.handleCanvas} style={{
width: 350,
height: 700,
borderWidth: 1,
borderColor: "red"
}} width={350} height={700} />
</View>
)
}
}
Here is a screenshot from the app:这是应用程序的屏幕截图: As you can see, the code, which should render the rectangle to the full size of the canvas (outlined in red), does not do so.如您所见,应该将矩形渲染为 canvas(红色轮廓)的完整大小的代码没有这样做。 According to the Expo Inspect-Element debug tool, the WebView (which is the entire rectangle) is only 300 x 150 pixels.根据 Expo Inspect-Element 调试工具,WebView(即整个矩形)只有 300 x 150 像素。
Am I missing something obvious?我错过了一些明显的东西吗? Or is this a bug with the react-native-canvas
?或者这是react-native-canvas
的错误?
This is on Android by the way.顺便说一句,这是在 Android 上。
Put this in your handleCanvas:把它放在你的handleCanvas中:
canvas.width = 400;
canvas.height = 700;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.