如何将画布代码转换为渲染矩形到svg
how to convert canvas code for rendering rectangle to svg
我有画布代码拖动和调整矩形的大小。但是我不能将这个画布代码转换为svg。如何将画布代码转换为svg。
这个stackoverflow链接不适合我使用。
提前感谢。
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {
x: 150,
y: 100,
w: 123,
h: 58
},
handlesSize = 8,
currentHandle = false,
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function point(x, y) {
return {
x: x,
y: y
};
}
function dist(p1, p2) {
return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
}
function getHandle(mouse) {
if (dist(mouse, point(rect.x, rect.y)) <= handlesSize) return 'topleft';
if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright';
if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize) return 'bottomleft';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize) return 'top';
if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize) return 'left';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize) return 'bottom';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize) return 'right';
return false;
}
function mouseDown(e) {
if (currentHandle) drag = true;
draw();
}
function mouseUp() {
drag = false;
currentHandle = false;
draw();
}
function mouseMove(e) {
var previousHandle = currentHandle;
if (!drag) currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
if (currentHandle && drag) {
var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
switch (currentHandle) {
case 'topleft':
rect.w += rect.x - mousePos.x;
rect.h += rect.y - mousePos.y;
rect.x = mousePos.x;
rect.y = mousePos.y;
break;
case 'topright':
rect.w = mousePos.x - rect.x;
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'bottomleft':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
rect.h = mousePos.y - rect.y;
break;
case 'bottomright':
rect.w = mousePos.x - rect.x;
rect.h = mousePos.y - rect.y;
break;
case 'top':
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'left':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
break;
case 'bottom':
rect.h = mousePos.y - rect.y;
break;
case 'right':
rect.w = mousePos.x - rect.x;
break;
}
}
if (drag || currentHandle != previousHandle) draw();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
if (currentHandle) {
var posHandle = point(0, 0);
switch (currentHandle) {
case 'topleft':
posHandle.x = rect.x;
posHandle.y = rect.y;
break;
case 'topright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y;
break;
case 'bottomleft':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h;
break;
case 'bottomright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h;
break;
case 'top':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y;
break;
case 'left':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h / 2;
break;
case 'bottom':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y + rect.h;
break;
case 'right':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h / 2;
break;
}
ctx.globalCompositeOperation = 'xor';
ctx.beginPath();
ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
}
}
init();
draw();
这里是在画布中渲染矩形的小提琴链接:
http://jsfiddle.net/BaliBalo/9HXMG/将其转换为SVG非常简单。
唯一的小问题是,我们必须添加一些处理,以满足当矩形的宽度或高度是负的。Canvas2D不介意,但SVG介意。
另外,在绘制拖拽句柄时,没有一种简单的方法来模拟异或操作。所以我把它们改成纯蓝色。
var canvas = document.getElementById('canvas'),
rect = {
x: 150,
y: 100,
w: 123,
h: 58
},
handlesSize = 8,
currentHandle = false,
drag = false
svgns = 'http://www.w3.org/2000/svg';
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function point(x, y) {
return {
x: x,
y: y
};
}
function dist(p1, p2) {
return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
}
function getHandle(mouse) {
if (dist(mouse, point(rect.x, rect.y)) <= handlesSize) return 'topleft';
if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright';
if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize) return 'bottomleft';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize) return 'top';
if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize) return 'left';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize) return 'bottom';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize) return 'right';
return false;
}
function mouseDown(e) {
if (currentHandle) drag = true;
draw();
}
function mouseUp() {
drag = false;
currentHandle = false;
draw();
}
function mouseMove(e) {
var previousHandle = currentHandle;
var svgPos = this.getBoundingClientRect();
if (!drag) currentHandle = getHandle(point(e.pageX - svgPos.left, e.pageY - svgPos.top));
if (currentHandle && drag) {
var mousePos = point(e.pageX - svgPos.left, e.pageY - svgPos.top);
switch (currentHandle) {
case 'topleft':
rect.w += rect.x - mousePos.x;
rect.h += rect.y - mousePos.y;
rect.x = mousePos.x;
rect.y = mousePos.y;
break;
case 'topright':
rect.w = mousePos.x - rect.x;
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'bottomleft':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
rect.h = mousePos.y - rect.y;
break;
case 'bottomright':
rect.w = mousePos.x - rect.x;
rect.h = mousePos.y - rect.y;
break;
case 'top':
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'left':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
break;
case 'bottom':
rect.h = mousePos.y - rect.y;
break;
case 'right':
rect.w = mousePos.x - rect.x;
break;
}
}
if (drag || currentHandle != previousHandle) draw();
}
function draw() {
//ctx.clearRect(0, 0, canvas.width, canvas.height);
while (canvas.firstChild) {
canvas.removeChild(canvas.firstChild);
}
//ctx.fillStyle = 'black';
//ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
var svgrect = document.createElementNS(svgns, 'rect');
svgrect.setAttribute('x', Math.min(rect.x, rect.x+rect.w));
svgrect.setAttribute('y', Math.min(rect.y, rect.y+rect.h));
svgrect.setAttribute('width', Math.abs(rect.w));
svgrect.setAttribute('height', Math.abs(rect.h));
canvas.appendChild(svgrect);
if (currentHandle) {
var posHandle = point(0, 0);
switch (currentHandle) {
case 'topleft':
posHandle.x = rect.x;
posHandle.y = rect.y;
break;
case 'topright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y;
break;
case 'bottomleft':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h;
break;
case 'bottomright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h;
break;
case 'top':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y;
break;
case 'left':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h / 2;
break;
case 'bottom':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y + rect.h;
break;
case 'right':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h / 2;
break;
}
//ctx.globalCompositeOperation = 'xor';
//ctx.beginPath();
//ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
//ctx.fill();
//ctx.globalCompositeOperation = 'source-over';
var circ = document.createElementNS(svgns, 'circle');
circ.setAttribute('cx', posHandle.x);
circ.setAttribute('cy', posHandle.y);
circ.setAttribute('r', handlesSize);
circ.setAttribute('fill', 'blue');
canvas.appendChild(circ);
}
}
init();
draw();
<svg id="canvas" width="500" height="500"></svg>
相关文章:
- javascript中的SVG转换在IE 11中不起作用
- 在Web Worker中将SVG转换为PNG
- 当使用canvg将Highchart SVG转换为PNG时,所有文本都会出现两次——如何解决
- 使用d3.js将SVG转换为画布
- 将带有图像元素的svg转换为html画布
- 将内联SVG转换为Base64字符串
- 将 SVG 转换为图像时画布到 URL 功能出现问题
- 阿巴普 :将 svg 转换为 png
- 使用 SVG 渲染引擎将 svg 转换为 png 时出现异常
- 当我将 SVG 转换为 Raphael JS 对象时,路径不会显示
- 将使用 D3js 创建的 SVG 转换为 PNG
- 用于 SVG 转换的 Javascript 事件侦听器
- 在客户端将 svg 转换为 png
- 将带有图像标签的 Svg 转换为 PNG
- 将 svg 转换为 base64.以编程方式创建的
- 使用Canvg将svg转换为png:"target.childnodes未定义“;错误
- raphaeljs-移动我从svg转换的路径
- 使用canvg脚本将内联svg转换为画布
- 将SVG转换为PNG,并将应用的图像作为SVG元素的背景
- Canvg|将SVG转换为Canvas以输出为图像