在背景图像中拟合4个三角形

Question

我正在尝试使用jquery，html5和canvas在主模板中放入4个三角形，

我似乎无法使它们合适......

这是我到目前为止所得到的......

https://jsfiddle.net/ax67r91y/

我认为错误的代码：

ctx.drawImage(part.img,                             // random image 
    0, 0, part.w, part.h,                           // source
    part.x,part.y,part.trisize.w,part.trisize.h);   // destination

所有图像应分为2种形式：“v”和“^”，

我可以移动图像，但将它们缩小到正确的大小似乎无法实现......

我觉得我很亲近，但是我已经好几个小时了，欢迎帮助！

预期结果：

Answer 1

这是你在找什么？

function createSVG(name, attributes) {
	var svg_node = document.createElementNS("http://www.w3.org/2000/svg", name);

	Object.keys(attributes).forEach(function(key) {
		if (key == 'textContent') {
			svg_node.textContent = attributes[key];
			return;
		} 
		svg_node.setAttribute(key, attributes[key]);
	});


	return svg_node;
}

Element.prototype.appendSVG = function(name, attributes) {
	this.appendChild(createSVG(name, attributes));
}

function Polygons() {
	this.canvas = createSVG('svg', {
		'version': 			'1.1',
		'shape-rendering': 	'geometricPrecision',
		'viewBox': 			'0 0 1589 745',
    'class': 'svg-content',
	});
  this.defs = createSVG('defs', {});
  this.canvas.appendChild(this.defs);
  this.registerPatterns();
 
  this.drawInnerLayer();
	this.drawOuterLayer();
}

Polygons.prototype.registerPatterns = function() {
	var patternBottom = createSVG('pattern', {
  	'height': "100%",
    'width': "100%",
    'patternContentUnits': "objectBoundingBox",
    'viewBox': "0 0 1 1",
    'preserveAspectRatio': "xMidYMid slice",
  });
  var imgBottom = createSVG('image', {
  	'height': "1",
    'width': "1",
    'preserveAspectRatio': "xMidYMid slice",
  });
  var imgLeft = imgBottom.cloneNode(true)
  imgLeft.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/1.png");
  var imgMiddle = imgBottom.cloneNode(true);
  imgMiddle.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/2.png");
  var imgRight = imgBottom.cloneNode(true);
  imgRight.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/3.png");
  
  imgBottom.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/4.png");
  
  var patternLeft = patternBottom.cloneNode(true);
  patternLeft.setAttribute('id', "img-left");
  patternLeft.appendChild(imgLeft);
  var patternRight = patternBottom.cloneNode(true);
  patternRight.setAttribute('id', "img-right");
  patternRight.appendChild(imgRight);
  var patternMiddle = patternBottom.cloneNode(true);
  patternMiddle.setAttribute('id', "img-middle");
  patternMiddle.appendChild(imgMiddle);
  
  patternBottom.setAttribute('id', "img-bottom");
  patternBottom.appendChild(imgBottom);
  
  this.defs.appendChild(patternLeft);
  this.defs.appendChild(patternRight);
  this.defs.appendChild(patternMiddle);
  this.defs.appendChild(patternBottom);
  
	var patternOverlayer = createSVG('pattern', {
  	'height': "100%",
    'width': "100%",
    'patternContentUnits': "objectBoundingBox",
    'id': "img-overlayer",
  });
  var imgOverlayer = createSVG('image', {
  	'height': "1",
    'width': "1",
    'preserveAspectRatio': "none",
  });
  imgOverlayer.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/assets/images/frame-all.png");
  patternOverlayer.appendChild(imgOverlayer);
  this.defs.appendChild(patternOverlayer);
}


Polygons.prototype.drawOuterLayer = function() {
	this.canvas.appendSVG('rect', {
		'x': '0',
    'y': '0',
    'width': '100%',
    'height': '100%',
    'fill': 'url(#img-overlayer)',
		'class': 		'img-overlayer',
	});
}

Polygons.prototype.drawInnerLayer = function() {
	this.canvas.appendSVG('polygon', {
		'points':   '500,55 800,50 643,370', 
		'class': 		'inner-polygon polygon-left',
    'fill': 'url(#img-left)',
	});
	this.canvas.appendSVG('polygon', {
		'points':   '800,70 665,395 935,395', 
		'class': 		'inner-polygon polygon-middle',
    'fill': 'url(#img-middle)',
	});
	this.canvas.appendSVG('polygon', {
		'points':   '820,50 1115,45 950,375', 
		'class': 		'inner-polygon polygon-right',
    'fill': 'url(#img-right)',
	});
	this.canvas.appendSVG('polygon', {
		'points':   '660,415 940,415 805,720', 
		'class': 		'inner-polygon polygon-down',
    'fill': 'url(#img-bottom)',
	});
}

var polygons = new Polygons();
document.getElementById('svg-container').appendChild(polygons.canvas);

#svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

<div id="svg-container"></div>