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

Question

我正在尝试使用 jquery、html5 和 canvas、

在主模板中放置 4 个三角形

我似乎无法让它们合身...

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

我认为错误的代码：

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

所有图片都应该被切割成两种形式：一个“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>

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

Fitting 4 triangles within a background image

html

javascript

jquery

canvas

theming