javascript - d3.js 将图像显示为圆形-6ren

javascript - d3.js 将图像显示为圆形

转载作者：行者123 更新时间：2023-12-03 03:57:20

代码:

// some colour variables
var tcBlack = "#130C0E";

// rest of vars
var w = 1255,
h = 925,
maxNodeSize = 50,
x_browser = 10,
y_browser = 15,
root;

var vis;
var force = d3.layout.force(); 

vis = d3.select("#vis").append("svg").attr("width", w).attr("height", h);

d3.json("marvel.json", function(json) {

root = json;
root.fixed = true;
root.x = w / 2;
root.y = h / 4;


    // Build the path
var defs = vis.insert("svg:defs")
  .data(["end"]);


defs.enter().append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

 update();
});



function update() {
  var nodes = flatten(root),
  links = d3.layout.tree().links(nodes);

 // Restart the force layout.
 force.nodes(nodes)
    .links(links)
    .gravity(0.05)
.charge(-1500)
.linkDistance(100)
.friction(0.5)
.linkStrength(function(l, i) {return 1; })
.size([w, h])
.on("tick", tick)
    .start();

var path = vis.selectAll("path.link")
  .data(links, function(d) { return d.target.id; });

path.enter().insert("svg:path")
  .attr("class", "link")
  // .attr("marker-end", "url(#end)")
  .style("stroke", "#eee");


// Exit any old paths.
path.exit().remove();



// Update the nodes…
var node = vis.selectAll("g.node")
  .data(nodes, function(d) { return d.id; });


// Enter any new nodes.
var nodeEnter = node.enter().append("svg:g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  .on("click", click)
  .call(force.drag);

// Append a circle
nodeEnter.append("svg:circle")
  .attr("r", function(d) { return Math.sqrt(40000) / 10 || 30; })
  .style("fill", "#ffffff");

// Append images
var images = nodeEnter.append("svg:image")
    .attr("xlink:href",  function(d) { return d.img;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

// make the image grow a little on mouse over and add the text details on click
var setEvents = images
      // Append hero text
      .on( 'click', function (d) {
          // d3.select("h1").html(d.hero); 
          d3.select("h3").html(d.name); 
          // d3.select("h3").html ("Take me to " + "<a href='" + d.link + "' >"  + d.hero + " web page ⇢"+ "</a>" ); 
       })

      .on( 'mouseenter', function() {
        // select element in current context
        d3.select( this )
          .transition()
          .attr("x", function(d) { return -60;})
          .attr("y", function(d) { return -60;})
          .attr("height", 100)
          .attr("width", 100);
      })
      // set back
      .on( 'mouseleave', function() {
        d3.select( this )
          .transition()
          .attr("x", function(d) { return -25;})
          .attr("y", function(d) { return -25;})
          .attr("height", 50)
          .attr("width", 50);
      });

 // Append hero name on roll over next to the node as well
 nodeEnter.append("text")
    .attr("class", "nodetext")
    .attr("x", x_browser)
    .attr("y", y_browser +15)
    .attr("fill", "red")
    .text(function(d) { return d.name; });


 // Exit any old nodes.
 node.exit().remove();


 // Re-select for update.
 path = vis.selectAll("path.link");
 node = vis.selectAll("g.node");

function tick() {


path.attr("d", function(d) {

 var dx = d.target.x - d.source.x,
       dy = d.target.y - d.source.y,
       dr = Math.sqrt(dx * dx + dy * dy);
       return   "M" + d.source.x + "," 
        + d.source.y 
        + "A" + dr + "," 
        + dr + " 0 0,1 " 
        + d.target.x + "," 
        + d.target.y;
});
node.attr("transform", nodeTransform);    
}
}



function nodeTransform(d) {
 d.x =  Math.max(maxNodeSize, Math.min(w - (d.imgwidth/2 || 16), d.x));
 d.y =  Math.max(maxNodeSize, Math.min(h - (d.imgheight/2 || 16), d.y));
 return "translate(" + d.x + "," + d.y + ")";
}


function click(d) {
 if (d.children) {
 d._children = d.children;
 d.children = null;
} else {
 d.children = d._children;
 d._children = null;
}

 update();
}


/**
 * Returns a list of all nodes under the root.
*/ 
function flatten(root) {
  var nodes = []; 
  var i = 0;

  function recurse(node) {
   if (node.children) 
   node.children.forEach(recurse);
   if (!node.id) 
   node.id = ++i;
   nodes.push(node);
  }

recurse(root);
return nodes;
}

我正在使用上面的代码使用d3.js显示图像。但图像没有显示为圆形。我希望子节点图像正确填充圆圈。

所以请帮助解决这个问题。答案将不胜感激。谢谢

这是我使用的示例:d3 | Force layout with images

最佳答案

var marvelJson={
 "name": "marvel",
 "img": "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/marvel.png",
 "children": [
  {
   "name": "Heroes",
   "children": [
    {
      "hero": "Spider-Man",
      "name": "Peter Benjamin Parker", 
      "link": "http://marvel.com/characters/54/spider-man",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_spiderman.png",
      "size": 40000
    },
    {
      "hero": "CAPTAIN MARVEL",
      "name": "Carol Danvers", 
      "link": "http://marvel.com/characters/9/captain_marvel",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_captainmarvel.png",
      "size": 40000
    },
    {
      "hero": "HULK", 
      "name": "Robert Bruce Banner",
      "link": "http://marvel.com/characters/25/hulk",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_hulk.png",
      "size": 40000
    },
    {
      "hero": "Black Widow", 
      "name": "Natalia 'Natasha' Alianovna Romanova",
      "link": "http://marvel.com/characters/6/black_widow",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_blackwidow.png",
      "size": 40000
    },
    {
      "hero": "Daredevil", 
      "name": "Matthew Michael Murdock",
      "link": "http://marvel.com/characters/11/daredevil",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_daredevil.png",
      "size": 40000
    },
    {
      "hero": "Wolverine", 
      "name": "James Howlett",
      "link": "http://marvel.com/characters/66/wolverine",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_wolverine.png",
      "size": 40000
    },
    {
      "hero": "Captain America", 
      "name": "Steven Rogers",
      "link": "http://marvel.com/characters/8/captain_america",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_captainamerica.png",
      "size": 40000
    },
    {
      "hero": "Iron Man", 
      "name": "Anthony Edward 'Tony' Stark",
      "link": "http://marvel.com/characters/29/iron_man",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_ironman.png",
      "size": 40000
    },
    {
      "hero": "THOR", 
      "name": "Thor Odinson",
      "link": "http://marvel.com/characters/60/thor",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_thor.png",
      "size": 40000
    }
  ]
  },
  {
   "name": "Villains",
   "children": [
    {
      "hero": "Dr. Doom",
      "name": "Victor von Doom", 
      "link": "http://marvel.com/characters/13/dr_doom",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/drdoom.png",
      "size": 40000
    },
    {
      "hero": "Mystique",
      "name": "Unrevealed", 
      "link": "http://marvel.com/characters/1552/mystique",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/mystique.png",
      "size": 40000
    },
    {
      "hero": "Red Skull",
      "name": "Johann Shmidt", 
      "link": "http://marvel.com/characters/1901/red_skull",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/redskull.png",
      "size": 40000
    },
    {
      "hero": "Ronan",
      "name": "Ronan", 
      "link": "http://marvel.com/characters/49/ronan",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/ronan.png",
      "size": 40000
    },
    {
      "hero": "Magneto",
      "name": "Max Eisenhardt", 
      "link": "http://marvel.com/characters/35/magneto",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/magneto.png",
      "size": 40000
    },
    {
      "hero": "Thanos",
      "name": "Thanos", 
      "link": "http://marvel.com/characters/58/thanos",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/thanos.png",
      "size": 40000
    },
    {
      "hero": "Black Cat",
      "name": "Felicia Hardy", 
      "link": "http://marvel.com/characters/271/black_cat",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/blackcat.png",
      "size": 40000
    }
   ]
  },
  {
   "name": "Teams",
   "children": [
    {
      "hero": "Avengers",
      "name": "", 
      "link": "http://marvel.com/characters/68/avengers",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/avengers.png",
      "size": 40000
    },
    {
      "hero": "Guardians of the Galaxy",
      "name": "", 
      "link": "http://marvel.com/characters/70/guardians_of_the_galaxy",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/gofgalaxy.png",
      "size": 40000
    },
    {
      "hero": "Defenders",
      "name": "", 
      "link": "http://marvel.com/characters/534/defenders",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/defenders.png",
      "size": 40000
    },
    {
      "hero": "X-Men",
      "name": "", 
      "link": "http://marvel.com/characters/71/x-men",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/xmen.png",
      "size": 40000
    },
    {
      "hero": "Fantastic Four",
      "name": "", 
      "link": "http://marvel.com/characters/69/fantastic_four",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/fantasticfour.png",
      "size": 40000
    },
    {
      "hero": "Inhumans",
      "name": "", 
      "link": "http://marvel.com/characters/1040/inhumans",
      "img":  "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/inhumans.png",
      "size": 40000
    }
   ]
  }  
 ]
}

/*
var imgurl = "http://wallpapers.androlib.com/wallicons/wallpaper.big-pqC.cs.png"

var margin = {top: 20, right: 10, bottom: 20, left: 10};


var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var defs = svg.append("defs").attr("id", "imgdefs")

var catpattern = defs.append("pattern")
                        .attr("id", "catpattern")
                        .attr("height", 1)
                        .attr("width", 1)
                        .attr("x", "0")
                        .attr("y", "0")


catpattern.append("image")
     .attr("x", -130)
     .attr("y", -220)
     .attr("height", 640)
     .attr("width", 480)
     .attr("xlink:href", imgurl)

svg.append("circle")
    .attr("r", 100)
    .attr("cy", 80)
    .attr("cx", 120)
    .attr("fill", "url(#catpattern)")
    */
    
    
    // some colour variables
  var tcBlack = "#130C0E";

// rest of vars
var w = 960,
    h = 800,
    maxNodeSize = 50,
    x_browser = 20,
    y_browser = 25,
    root;
 
var vis;
var force = d3.layout.force(); 

vis = d3.select("#vis").append("svg").attr("width", w).attr("height", h);
 
//d3.json("marvel.json", function(json) {
 var json = marvelJson;
 
  root = json;
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 4;
 
 
        // Build the path
  var defs = vis.insert("svg:defs")
      .data(["end"]);
 
 
  defs.enter().append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");
 try{
     update();
     }catch(e){
     console.log(e);
     }
//});
 
 
/**
 *   
 */
function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);
 
  // Restart the force layout.
  force.nodes(nodes)
        .links(links)
        .gravity(0.05)
    .charge(-1500)
    .linkDistance(100)
    .friction(0.5)
    .linkStrength(function(l, i) {return 1; })
    .size([w, h])
    .on("tick", tick)
        .start();
 
   var path = vis.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });
 
    path.enter().insert("svg:path")
      .attr("class", "link")
      // .attr("marker-end", "url(#end)")
      .style("stroke", "#eee");
 
 
  // Exit any old paths.
  path.exit().remove();
 
 
 
  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id; });
 
 
  // Enter any new nodes.
  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .on("click", click)
      .call(force.drag);
 
 
 /*Dinesh Code*/
 /*
 
 var defs = svg.append("defs").attr("id", "imgdefs")

var catpattern = defs.append("pattern")
                        .attr("id", "catpattern")
                        .attr("height", 1)
                        .attr("width", 1)
                        .attr("x", "0")
                        .attr("y", "0")


catpattern.append("image")
     .attr("x", -130)
     .attr("y", -220)
     .attr("height", 640)
     .attr("width", 480)
     .attr("xlink:href", imgurl)

svg.append("circle")
    .attr("r", 100)
    .attr("cy", 80)
    .attr("cx", 120)
    .attr("fill", "url(#catpattern)")
    */
 
 /******* Dinesh Code End******/
 
 nodeEnter.append("defs").attr("id", "imgdefs")
 .append("pattern")
   .attr("id", function(d){ if(d.img)return d.img.replace(/[/|.|:]/g, ""); else null; })
   .attr("height", 1)
   .attr("width", 1)
   .attr("x", "0")
   .attr("y", "0")
   .append("image")
     .attr("height",  function(d) { return 2* Math.sqrt(d.size) / 10 || 4.5; })
     .attr("width",  function(d) { return 2* Math.sqrt(d.size) / 10 || 4.5; })
     .attr("xlink:href",  function(d){if(d.img)return d.img+""; else null; })
 
  // Append a circle
 var images = nodeEnter.append("svg:circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
      .attr("fill", function(d){ if(d.img)return "url(#"+d.img.replace(/[/|.|:]/g, "")+")" ; else null; });
 
   
  // Append images
 /* var images = nodeEnter.append("svg:image")
        .attr("xlink:href",  function(d) { return d.img;})
        .attr("x", function(d) { return -25;})
        .attr("y", function(d) { return -25;})
        .attr("height", 50)
        .attr("width", 50);*/
  
  // make the image grow a little on mouse over and add the text details on click
  var setEvents = images
          // Append hero text
          .on( 'click', function (d) {
              d3.select("h1").html(d.hero); 
              d3.select("h2").html(d.name); 
              d3.select("h3").html ("Take me to " + "<a href='" + d.link + "' >"  + d.hero + " web page ⇢"+ "</a>" ); 
           })

          .on( 'mouseenter', function(d) {
          if(d.img){
          //console.log(d3.select(this).parent);
          d3.select("pattern#"+d.img.replace(/[/|.|:]/g, "")).select("image").attr("width","100").attr("height","100");
            // select element in current context
            d3.select( this )
              .transition()
              .attr("x", function(d) { return -60;})
              .attr("y", function(d) { return -60;})
              .attr("r", "50")
              //.attr("height", 100)
              //.attr("width", 100);
              }
          })
          // set back
          .on( 'mouseleave', function(d) {
          if(d.img){
          d3.select("pattern#"+d.img.replace(/[/|.|:]/g, "")).select("image").attr("width","40").attr("height","40");
          
            d3.select( this )
              .transition()
              .attr("x", function(d) { return -25;})
              .attr("y", function(d) { return -25;})
              .attr("r", "20")
              //.attr("height", 50)
              //.attr("width", 50);
              }
          });

  // Append hero name on roll over next to the node as well
  nodeEnter.append("text")
      .attr("class", "nodetext")
      .attr("x", x_browser)
      .attr("y", y_browser +15)
      .attr("fill", tcBlack)
      .text(function(d) { return d.hero; });
 
 
  // Exit any old nodes.
  node.exit().remove();
 
 
  // Re-select for update.
  path = vis.selectAll("path.link");
  node = vis.selectAll("g.node");
 
function tick() {
 
 
    path.attr("d", function(d) {
 
     var dx = d.target.x - d.source.x,
           dy = d.target.y - d.source.y,
           dr = Math.sqrt(dx * dx + dy * dy);
           return   "M" + d.source.x + "," 
            + d.source.y 
            + "A" + dr + "," 
            + dr + " 0 0,1 " 
            + d.target.x + "," 
            + d.target.y;
  });
    node.attr("transform", nodeTransform);    
  }
}

 
/**
 * Gives the coordinates of the border for keeping the nodes inside a frame
 * http://bl.ocks.org/mbostock/1129492
 */ 
function nodeTransform(d) {
  d.x =  Math.max(maxNodeSize, Math.min(w - (d.imgwidth/2 || 16), d.x));
    d.y =  Math.max(maxNodeSize, Math.min(h - (d.imgheight/2 || 16), d.y));
    return "translate(" + d.x + "," + d.y + ")";
   }
 
/**
 * Toggle children on click.
 */ 
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
 
  update();
}
 
 
/**
 * Returns a list of all nodes under the root.
 */ 
function flatten(root) {
  var nodes = []; 
  var i = 0;
 
  function recurse(node) {
    if (node.children) 
      node.children.forEach(recurse);
    if (!node.id) 
      node.id = ++i;
    nodes.push(node);
  }
 
  recurse(root);
  return nodes;
}

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
      body {font-family: "Source Code Pro", Consolas, monaco, monospace; line-height: 160%; font-size: 16px;  margin: 0; }
      path.link {
        fill: none;
        stroke-width: 2px;
      }
      .node:not(:hover) .nodetext {
        display: none;
      }
      h1 { font-size: 36px; margin: 10px 0; text-transform: uppercase; font-weight: normal;}
      h2, h3 { font-size: 18px; margin: 5px 0 ; font-weight: normal;}
      header {padding: 20px; position: absolute; top: 0; left: 0;}
      a:link { color: #EE3124; text-decoration: none;}
      a:visited { color: #EE3124; }
      a:hover { color: #A4CD39; text-decoration: underline;}
      a:active { color: #EE3124; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<section id="vis"></section>

经过几个小时的工作，我做了一些东西，请观察我所做的代码更改，如果您无法弄清楚，请在下面评论，我将编辑我的答案并提供完整的解释。:D

关于javascript - d3.js 将图像显示为圆形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44878164/

文章推荐： javascript - ctx.clearRect Canvas Sprite

文章推荐： javascript - Jquery 事件处理程序上的字符串插值不起作用

javascript - 图像->JSON->.Net 图像
我正在尝试学习 Knockout 并尝试创建一个照片 uploader 。我已成功将一些图像存储在数组中。现在我想回帖。在我的 knockout 码(Javascript)中，我这样做: 我在 Jav
php - 如何在mysql中添加文本+图像+文本+图像+ ...？
我正在使用 php 编写脚本。我的典型问题是如何在 mysql 中添加一个有很多替代文本和图像的问题。想象一下有机化学中具有苯结构的描述。最有效的方法是什么？据我所知，如果我有一个图像，我可以在数据
html - Bootstrap 图像/按钮/图像
我在两个图像之间有一个按钮，我想将按钮居中到图像高度。有人可以帮帮我吗？ Entrar
javascript - 从中心点旋转全尺寸 Canvas 图像，而不移动其他 Canvas 图像
下面的代码示例可以在这里查看 - http://dev.touch-akl.com/celebtrations/ 我一直在尝试做的是在 Canvas 上绘制 2 个图像(发光，然后耀斑。这些图像的链接
javascript - 为什么相同的 JS 代码不适用于第二个帖子/图像，但适用于第一个帖子/图像？
请检查此https://jsfiddle.net/rhbwpn19/4/ 图像预览对于第一篇帖子工作正常，但对于其他帖子则不然。我应该在这里改变什么？ function readURL(input)
javascript - HTML Canvas 图像 - 在页面中绘制多 Canvas 图像
我对 Canvas 有疑问。我可以用单个图像绘制 Canvas ，但我不能用单独的图像绘制每个 Canvas 。- 如果数据只有一个图像，它工作正常，但数据有多个图像，它不工作你能帮帮我吗？ va
ios - 查找指定文件的扩展文件类型(JPEG 图像、TIFF 图像、...) objective c
我的问题很简单。如何获取 UIImage 的扩展类型？我只能将图像作为 UIImage 而不是它的名称。图像可以是静态的，也可以从手机图库甚至文件路径中获取。如果有人可以为此提供一点帮助，将不胜感激。
image-processing - 如何将 SVG 图像 "paths"转换为单独的 PNG 图像？
我有一个包含 67 个独立路径的 SVG 图像。是否有任何库/教程可以为每个路径创建单独的光栅图像(例如 PNG)，并可能根据路径 ID 命名它们？最佳答案谢谢大家。我最终使用了两个答案的组合。
javascript - 使一个(图像)向右移动并旋转 45 度，同时将鼠标悬停在另一个(图像)上
我想将鼠标悬停在一张图片(音乐专辑)上，然后播放一张唱片，所以我希望它向右移动并旋转一点，当它悬停时我希望它恢复正常动画片。它已经可以向右移动，但我无法让它随之旋转。我喜欢让它尽可能简单，因为我不是编
ios - Retina iOS 设备不显示@2X 图像，它显示 1X 图像
Retina iOS 设备不显示@2X 图像，它显示 1X 图像。我正在使用 Xcode 4.2.1 Build 4D502，该应用程序的目标是 iOS 5。我创建了一个测试应用(主/细节)并添加
javascript - 如何将 HTML CSS 图像 slider 转换为 Angular 图像 slider ？
我正在尝试从头开始以 Angular 实现图像 slider ，并尝试复制 w3school基于图像 slider 。下面我尝试用 Angular 实现，谁能指导我如何使用 Angular 实现？
c++ - 如何从 opencv 中的 RGB 图像(3 channel 图像)访问图像数据
我正在尝试获取图像的图像数据，其中 w= 图像宽度，h = 图像高度 for (int i = x; i imageData[pos]>0) //Taking data (here is the pr
php - HTML (或 JS 图像)与通过 PHP 的内联图像(base64_encoded 图像)
我的网页最初通过在 javascript 中动态创建图像填充了大约 1000 个缩略图。由于权限问题，我迁移到 suPHP。现在不用标准标签本身我正在通过这个 php 脚本进行检索 $file
python - 将 Python Opencv 图像(numpy 数组)转换为 PyQt QPixmap 图像
我正在尝试将 python opencv 图像转换为 QPixmap。我按照指示显示Page Link我的代码附在下面 img = cv2.imread('test.png')[:,:,::1]/2
python - OpenCV 将图像读取为 3 channel 图像，而 PIL 将图像读取为 1 channel 图像
我试图在这个 Repository 中找出语义分割数据集的 NYU-v2 . 我很难理解图像标签是如何存储的。例如，给定以下图像: 对应的标签图片为: 现在，如果我在 OpenCV 中打开标签图像，
java - 如何循环 8*1 svg 图像(由 java 生成)以获得 8*8 svg 图像？
import java.util.Random; class svg{ public static void main(String[] args){ String f="\"
Android自定义画笔图案/图像
我有一张 8x8 的图片。 (位图 - 可以更改) 我想做的是能够绘制一个形状，给定一个 Path 和 Paint 对象到我的 SurfaceView 上。目前我所能做的就是用纯色填充形状。我怎样才
HTML 图像
要在页面上显示图像，你需要使用源属性（src）。src 指 source 。源属性的值是图像的 URL 地址。定义图像的语法是：在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此
图像&视频编辑工具箱MMEditing安装及使用示例(Inpainting)
**MMEditing是基于PyTorch的图像&视频编辑开源工具箱，支持图像和视频超分辨率(super-resolution)、图像修复(inpainting)、图像抠图(matting)、
来自资源文件的 Qt 图像
我正在尝试通过资源文件将图像插入到我的程序中，如下所示: green.png other files 当我尝试使用 QImage 或 QPixm

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3.js 将图像显示为圆形