本文介绍了如何在画布中定位 Path2D SVG 元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在画布上绘制一个 path2D SVG 形状.问题是 moveTo 函数在使用 SVG 数据时似乎不起作用.
I'm drawing a path2D SVG shape on canvas. The problem is that the moveTo function does not seem to work when using SVG data.
此代码笔说明了该问题.https://codepen.io/grasmachien/pen/rNaJeBN
The problem is illustrated in this codepen. https://codepen.io/grasmachien/pen/rNaJeBN
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
p.moveTo(100,100)
ctx.fill(p);
有没有办法在不移动画布的情况下移动路径?
Is there a way to move the path without moving the canvas?
推荐答案
使用变换移动路径
使用 CanvasRenderingContext2D.translate
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.translate(100, 100);
ctx.fill(p);
或使用 CanvasRenderingContext2D.setTransform
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.setTransform(1, 0, 0, 1, 100, 100); // Also resets the transform before applying
ctx.fill(p);
或使用 CanvasRenderingContext2D.transform
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.transform(1, 0, 0, 1, 100, 100);
ctx.fill(p);
这篇关于如何在画布中定位 Path2D SVG 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！