canvas.translate(x,y)单位

最新推荐文章于 2024-04-07 17:52:53 发布
最新推荐文章于 2024-04-07 17:52:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengyee_zju/article/details/17024663
版权
canvas.translate(x,y)这里的参数x,y都以像素为单位。
fengyee_zju
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Canvas drawText文字居中的一些事（图解）
01-05
首先把坐标原点移动到控件中心（默认坐标原点在屏幕左上角），这样看起来比较直观一些，然后绘制x、y轴，此时原点向上y为负，向下y为正，向左x为负，向右x为正，以（0,0）坐标开始绘制一段文本： @Override public...
理解HTML5 canvas.translate(x,y)
hehongwei44的专栏
05-09 291
规范原文如下:The translate(x, y) method must add the translation transformation described by the arguments to the transformation matrix. The x argument represents the translation distance in the horizontal ...
FlutterUI（三）Canvas进阶
大灰狼的小绵羊哥哥的博客
06-07 1677
save(),saveLayer(),restore() canvas.save(),保存之前画的内容与canvas的状态 canvas.saveLayer(rect，paint),保存之前画的内容，并新建一个图层，以后在此新图层上绘制。参数rect确定图层的范围，只能在此范围内绘制，超出范围的绘制不显示。参数paint表示其blendMode与之前的图层的混合模式。 canvas.restore(),将该方法与前面最近的一个save() 或saveLayer()之间的操作合并到一起，save与r
Canvas进阶之translate、scale、rotate、skew方法讲解！，系统盘点Android开发者必须掌握的知识点
最新发布
2401_84152719的博客
04-07 389
俗话说，条条大路通罗马，我们除了使用canvas.translate ，还能不能使用别的方式进行实现呢，答案当然是可以，比如在绘制的时候根据for循环里的 i 值也可以直接计算出每一根刻度线的位置，然后直接进行绘制，相比之下，这两种方式的优劣大家也可以自行比较一下，好了，canvas.translate() 就说这么多；会与之前的矩形重叠吗？其实最终效果和网上找的还是有点小差别的，由于画布的缩放，越小的时候画笔宽度越细，而原图是所有的都一样宽度，但似乎画笔宽度缩放之后效果更佳，哈哈 …
canvas基础知识总结
weixin_40509884的博客
08-06 470
canvas基础知识总结 canvas兼容性（主要针对IE）：IE9以上 canvas默认宽高是300px * 150px 基本绘画：canvas.getContext(‘2d’) canvas画矩形： （1）fillRect(x, y, width, height) :x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸...
Flutter绘制系列02---画布的基础操作
title_martin的博客
05-31 925
画布变形和状态 画布变化主要通过一个4*4的变换矩阵，其中transform方法是最核心的,也是最难用的。 不过另外的四个方法都是为了简单使用，对transform的封装 注意，画布的变换是持久性的，变换之后的所有绘制都在变换后的画布上运行。 变换不是永久性的变换，需要使用状态的存储和恢复到之前画布的状态。 1.平移变换 如果想要屏幕的(0,0)点永远在屏幕的中心，可以将画布进行偏移 但是这样之后的绘制就会以中心为原点。 @override void paint(Canvas canva
微信小程序 | canvas绘图
weixin_34393428的博客
05-25 347
1、新的尺寸单位 rpx 　　rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。 　　规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 　　设备 rpx换算px (屏幕宽度/750)； px换算rpx (750/屏幕宽度) 2...
canvas案例笔记
07-03
平移： ctx.translate(x, y) x表示从当前坐标系向x正方向移动x像素 y表示从当前坐标系向y轴的正方向移动y像素 旋转： ctx.rotate(x); x 表示弧度制单位 从当前坐标系沿着旋转x弧度 如果x值为正 顺时针旋转 反之 逆...
HTML5 Canvas城市高楼动画特效.zip
07-11
代码片段： render: function(ctx) {  ctx.save(); ... ctx.fillStyle = this.color;... ctx.translate(this.x, this.y);  ctx.fillRect(-this.w/2, -this.h, this.w, this.h);  ctx.restore();  }
css3 HTML5 Canvas炫酷3D线条延伸动画特效.zip
07-11
ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx....
node-drawille-canvas
05-06
绘画画布 用于 HTML5 Canvas API。安装$ npm install drawille-canvas...c.translate（x，y） 翻译当前的转换矩阵。c。旋转（a） 以给定角度旋转当前变换矩阵。 c.scale（x，y） 缩放当前的变换矩阵。 c.beginPath（）
canvas与svg的区别
m0_62883848的博客
05-26 873
canvas： 通过 js 来绘制 2D图形。 canvas 图像单位是像素。 canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制 svg： SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用来定义用于网络的基于矢量的图形。 SVG 使用 XML 格式定义图形。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 canvas与svg的区别： svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg
CSS3变形
m0_72943141的博客
07-28 1321
CSS3变形是一些效果的集合 平移 transform: translate(100px,100px); 旋转 transform: rotate(30deg); 缩放 transform: scale(2); 倾斜 transform: skew(5deg,5deg);
js基础-canvas
front_end_fan
09-21 389
Canvas二、canvasHTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。要使用Canvas API，首先需要新建一个<canvas>网页元素<canvas id="canvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas>
canvas介绍
weixin_48878221的博客
06-20 559
了解一下canvas历史和作用，以及canvas的基础概念。
28.Flutter:成为Canvas绘制大师(四)
weixin_34015336的博客
03-24 1388
目录传送门：《Flutter快速上手指南》先导篇通过前面 3 篇：25.Flutter:成为Canvas绘制大师(一)26.Flutter:成为Canvas绘制大师(二)27.Flutter:成为Canvas绘制大师(三)相信你已经掌握了 Flutter 中绘制基础图形的操作，本篇将会讲解 Canvas 的变换操作。save()、saveLayer() 和 restore()在开始了解 Canva...
css3知识点03—变换+动画
m0_65208646的博客
03-17 1010
一、变换 transform 1、移动 语法：transform：translate(x , y); translateX(数值+单位) 水平移动、 translateY(数值+单位) 垂直移动 transform:translate(150px,150px) ; /* 斜着走 */ transform: translateX(500px); /* 往左右走 */ transform: translateY(500px); ..
3D移动 translate3d
m0_49471668的博客
06-27 621
3D转换我们主要学习工作中最常用的3D位移和3D旋转 主要知识点3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。translform: translateX(100px):仅仅是在x轴上移动 translform: translateY(100px):仅仅是在Y轴上移动 translform: translateZ(100px):仅仅是在Z轴上移动(注意： translateZ一般用px作单位) transform: translate3d(x,y,z):其中x、y、z分别指要移动的
import QtQuick 2.4 import QtQuick.Controls 1.4 import QtQuick.Window 2.3 ApplicationWindow { visible: true width: 800 height: 600 title: "Drawing Board Example" Rectangle { width: 600 height: 400 MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true property bool isDragging: false property var startPoint: Qt.point(0,0) property var rect: { x: 0, y: 0, width: 100, height: 100, angle: 0 } // 绘制矩形 function drawRect() { canvas.getContext("2d").clearRect(0, 0, width, height); canvas.getContext("2d").save(); canvas.getContext("2d").translate(rect.x, rect.y); canvas.getContext("2d").rotate(rect.angle); canvas.getContext("2d").fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height); canvas.getContext("2d").restore(); } // 鼠标事件处理 onPressed: { const x = mouse.x - width / 2; const y = mouse.y - height / 2; if (x > rect.x - rect.width / 2 && x < rect.x + rect.width / 2 && y > rect.y - rect.height / 2 && y < rect.y + rect.height / 2) { isDragging = true; startPoint = Qt.point(mouse.x, mouse.y); } } onPositionChanged:: { if (isDragging) { const dx = mouse.x - startPoint.x; const dy = mouse.y - startPoint.y; rect.x += dx; rect.y += dy; startPoint = Qt.point(mouse.x, mouse.y); drawRect(); } } onReleased: { isDragging = false; } onWheel: { const zoom = angleDelta.y > 0 ? 0.9 : 1.1; rect.width *= zoom; rect.height *= zoom; drawRect(); } // 画布 Canvas { id: canvas anchors.fill: parent contextType: "2d" // 设置画布初始位置和网格线样式 onPaint: { canvas.getContext("2d").translate(width / 2, height / 2); canvas.getContext("2d").lineWidth = 0.5; canvas.getContext("2d").strokeStyle = '#ddd'; // 绘制网格线 for (let i = -width / 2; i <= width / 2; i += 10) { canvas.getContext("2d").beginPath(); canvas.getContext("2d").moveTo(i, -height / 2); canvas.getContext("2d").lineTo(i, height / 2); canvas.getContext("2d").stroke(); } for (let i = -height / 2; i <= height / 2; i += 10) { canvas.getContext("2d").beginPath(); canvas.getContext("2d").moveTo(-width / 2, i); canvas.getContext("2d").lineTo(width / 2, i); canvas.getContext("2d").stroke(); } drawRect(); } } } } }这段代码中的property var rect: { x: 0, y: 0, width: 100, height: 100, angle: 0 }这一行发生报错，请基于qt的qml语言做出修改
06-09
property int x: 0 property int y: 0 property int width: 100 property int height: 100 property int angle: 0 } ``` 将原先的 rect 变量类型修改为 QtObject ，然后在其内部定义各个属性，即可避免报错。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值