将地图区域 HTML 转换为 PHP 中的 PDF(这可能吗?)
Convert map area HTML to PDF in PHP (is that possible?)
我想知道是否可以在 PHP 中将地图面积为 HTML 的图像转换为 PDF。
用TCPDF,包含图像不是问题,然后绘制表格。但是要完美地绘制出我图像上的每个区域几乎是不可能的。
<img src="body.jpg" class="img-fluid" id="map-image" style="width: 280px; max-width: 280px; height: auto;" alt="" usemap="#map" />
<map id="map" name="map">
<area href="#" part="MD" data-part="Main Droite" shape="poly" coords="324, 406, 356, 396, 357, 403, 363, 406, 368, 410, 374, 415, 378, 419, 381, 424, 385, 427, 389, 434, 392, 439, 391, 444, 386, 447, 381, 447, 378, 444, 377, 451, 376, 464, 376, 477, 377, 485, 375, 491, 369, 493, 367, 497, 365, 500, 358, 498, 356, 496, 351, 496, 347, 494, 345, 487, 342, 489, 335, 490, 332, 485, 331, 473, 329, 459, 325, 449, 325, 434, 325, 418" />
<area href="#" part="MG" data-part="Main Gauche" shape="poly" coords="45, 401, 79, 410, 79, 422, 79, 436, 79, 446, 77, 460, 75, 473, 72, 482, 70, 488, 65, 490, 61, 487, 59, 482, 56, 491, 55, 497, 52, 498, 47, 497, 45, 500, 41, 502, 37, 500, 35, 497, 35, 492, 31, 491, 28, 488, 28, 484, 28, 478, 28, 468, 28, 456, 28, 450, 28, 444, 22, 444, 14, 446, 12, 443, 11, 437, 14, 434, 17, 429, 23, 423, 28, 420, 35, 413, 42, 407" />
<area href="#" part="MI" data-part="Membres inférieurs" shape="poly" coords="131, 363, 146, 366, 168, 369, 196, 371, 223, 371, 248, 366, 265, 363, 270, 359, 278, 382, 283, 405, 287, 423, 291, 438, 291, 463, 291, 479, 290, 493, 289, 507, 287, 527, 284, 540, 282, 548, 283, 559, 286, 570, 287, 582, 286, 595, 284, 605, 288, 619, 289, 632, 289, 644, 290, 658, 286, 670, 284, 683, 279, 695, 279, 707, 275, 719, 273, 732, 271, 743, 271, 754, 271, 767, 273, 777, 277, 784, 281, 789, 287, 797, 288, 803, 288, 811, 287, 814, 283, 819, 279, 821, 275, 823, 271, 824, 268, 826, 264, 825, 260, 823, 257, 825, 251, 825, 246, 824, 241, 818, 238, 809, 238, 797, 238, 789, 237, 778, 237, 767, 237, 763, 234, 758, 234, 753, 236, 744, 239, 741, 243, 737, 243, 724, 244, 717, 241, 702, 238, 688, 236, 682, 235, 669, 234, 658, 234, 647, 234, 638, 235, 626, 237, 613, 237, 607, 234, 598, 231, 593, 229, 583, 229, 576, 229, 571, 227, 564, 225, 558, 223, 549, 223, 540, 222, 530, 220, 522, 218, 516, 212, 502, 210, 490, 209, 484, 207, 475, 206, 464, 206, 455, 202, 452, 198, 452, 199, 461, 198, 475, 196, 487, 193, 497, 191, 505, 188, 515, 187, 520, 184, 528, 183, 534, 182, 541, 180, 549, 179, 555, 177, 560, 175, 566, 175, 574, 175, 580, 173, 590, 171, 597, 167, 606, 167, 613, 168, 623, 170, 635, 170, 638, 171, 644, 169, 654, 169, 668, 168, 679, 165, 691, 161, 703, 162, 710, 162, 723, 162, 731, 163, 737, 165, 743, 169, 750, 172, 755, 169, 762, 169, 774, 168, 784, 168, 789, 167, 802, 167, 807, 164, 815, 163, 818, 159, 825, 157, 825, 150, 825, 149, 825, 145, 825, 143, 823, 140, 824, 139, 824, 135, 824, 131, 824, 127, 821, 120, 818, 118, 816, 116, 812, 115, 804, 115, 797, 119, 792, 126, 782, 130, 776, 134, 768, 133, 762, 132, 748, 132, 737, 130, 723, 129, 716, 128, 707, 124, 695, 123, 685, 120, 677, 117, 664, 116, 658, 114, 646, 114, 640, 115, 631, 117, 615, 119, 604, 118, 586, 119, 570, 120, 558, 123, 546, 120, 534, 116, 514, 115, 502, 112, 484, 112, 475, 112, 472, 113, 458, 113, 442, 114, 428, 117, 416, 121, 401, 125, 389, 131, 375" />
<area href="#" part="D" data-part="Dos" shape="poly" coords="132, 359, 153, 363, 172, 366, 191, 367, 211, 368, 232, 366, 251, 362, 263, 359, 269, 353, 270, 341, 270, 330, 268, 321, 266, 307, 268, 298, 273, 285, 278, 274, 277, 259, 276, 247, 275, 239, 275, 231, 275, 223, 274, 213, 274, 196, 274, 185, 273, 174, 272, 163, 271, 152, 270, 143, 259, 139, 250, 136, 243, 133, 230, 139, 218, 141, 210, 142, 179, 141, 171, 139, 163, 136, 157, 133, 147, 138, 139, 141, 134, 143, 133, 152, 132, 170, 132, 177, 131, 199, 131, 211, 130, 225, 130, 236, 128, 247, 128, 259, 127, 268, 127, 277, 130, 286, 134, 293, 136, 302, 135, 312, 134, 324, 134, 336, 133, 347" />
<area href="#" part="C" data-part="Cou" shape="poly" coords="167, 94, 173, 97, 181, 103, 190, 110, 202, 114, 213, 111, 222, 106, 229, 97, 234, 96, 233, 104, 233, 116, 234, 124, 236, 129, 239, 131, 232, 136, 222, 138, 211, 139, 201, 139, 193, 139, 182, 139, 173, 137, 167, 134, 161, 131, 161, 130, 167, 127, 170, 124, 170, 117, 170, 111, 169, 105, 168, 100" />
<area href="#" part="MSD" data-part="Membre supérieur Droit" shape="poly" coords="273, 144, 288, 147, 297, 151, 306, 155, 312, 165, 318, 183, 322, 195, 324, 210, 322, 221, 325, 231, 328, 245, 327, 255, 330, 267, 333, 279, 336, 289, 341, 309, 345, 325, 348, 344, 348, 360, 352, 375, 356, 391, 322, 402, 318, 393, 313, 381, 307, 372, 301, 359, 296, 351, 293, 340, 291, 329, 289, 314, 287, 295, 285, 286, 282, 276, 279, 266" />
<area href="#" part="MSG" data-part="Membre supérieur Gauche" shape="poly" coords="125, 268, 119, 284, 116, 299, 112, 322, 112, 333, 108, 345, 101, 357, 95, 375, 84, 394, 79, 404, 48, 395, 53, 368, 54, 356, 58, 331, 60, 316, 63, 302, 66, 290, 72, 280, 73, 264, 76, 251, 80, 231, 82, 222, 83, 213, 82, 192, 83, 186, 87, 177, 92, 163, 101, 155, 111, 149, 123, 145, 131, 144" />
</map>
如果可能的话,我想用一些颜色等将这些区域绘制成 PDF...
谢谢
编辑:
至少,可以将 html 地图区域(使用 ImageMapster)转换为 PNG 或 JPEG 图像?
AFAIK,您可以直接使用从 html 到 TCPDF 的区域。
首先从 html 获取您的区域,例如:
// your areas
$area[0] = "<area href=\"#\" part=\"MD\" data-part=\"Main Droite\" shape=\"poly\" coords=\"324, 406, 356, 396, 357, 403, 363, 406, 368, 410, 374, 415, 378, 419, 381, 424, 385, 427, 389, 434, 392, 439, 391, 444, 386, 447, 381, 447, 378, 444, 377, 451, 376, 464, 376, 477, 377, 485, 375, 491, 369, 493, 367, 497, 365, 500, 358, 498, 356, 496, 351, 496, 347, 494, 345, 487, 342, 489, 335, 490, 332, 485, 331, 473, 329, 459, 325, 449, 325, 434, 325, 418\" />";
$area[1] = "<area href=\"#\" part=\"MG\" data-part=\"Main Gauche\" shape=\"poly\" coords=\"45, 401, 79, 410, 79, 422, 79, 436, 79, 446, 77, 460, 75, 473, 72, 482, 70, 488, 65, 490, 61, 487, 59, 482, 56, 491, 55, 497, 52, 498, 47, 497, 45, 500, 41, 502, 37, 500, 35, 497, 35, 492, 31, 491, 28, 488, 28, 484, 28, 478, 28, 468, 28, 456, 28, 450, 28, 444, 22, 444, 14, 446, 12, 443, 11, 437, 14, 434, 17, 429, 23, 423, 28, 420, 35, 413, 42, 407\" />";
$area[2] = "<area href=\"#\" part=\"MI\" data-part=\"Membres inférieurs\" shape=\"poly\" coords=\"131, 363, 146, 366, 168, 369, 196, 371, 223, 371, 248, 366, 265, 363, 270, 359, 278, 382, 283, 405, 287, 423, 291, 438, 291, 463, 291, 479, 290, 493, 289, 507, 287, 527, 284, 540, 282, 548, 283, 559, 286, 570, 287, 582, 286, 595, 284, 605, 288, 619, 289, 632, 289, 644, 290, 658, 286, 670, 284, 683, 279, 695, 279, 707, 275, 719, 273, 732, 271, 743, 271, 754, 271, 767, 273, 777, 277, 784, 281, 789, 287, 797, 288, 803, 288, 811, 287, 814, 283, 819, 279, 821, 275, 823, 271, 824, 268, 826, 264, 825, 260, 823, 257, 825, 251, 825, 246, 824, 241, 818, 238, 809, 238, 797, 238, 789, 237, 778, 237, 767, 237, 763, 234, 758, 234, 753, 236, 744, 239, 741, 243, 737, 243, 724, 244, 717, 241, 702, 238, 688, 236, 682, 235, 669, 234, 658, 234, 647, 234, 638, 235, 626, 237, 613, 237, 607, 234, 598, 231, 593, 229, 583, 229, 576, 229, 571, 227, 564, 225, 558, 223, 549, 223, 540, 222, 530, 220, 522, 218, 516, 212, 502, 210, 490, 209, 484, 207, 475, 206, 464, 206, 455, 202, 452, 198, 452, 199, 461, 198, 475, 196, 487, 193, 497, 191, 505, 188, 515, 187, 520, 184, 528, 183, 534, 182, 541, 180, 549, 179, 555, 177, 560, 175, 566, 175, 574, 175, 580, 173, 590, 171, 597, 167, 606, 167, 613, 168, 623, 170, 635, 170, 638, 171, 644, 169, 654, 169, 668, 168, 679, 165, 691, 161, 703, 162, 710, 162, 723, 162, 731, 163, 737, 165, 743, 169, 750, 172, 755, 169, 762, 169, 774, 168, 784, 168, 789, 167, 802, 167, 807, 164, 815, 163, 818, 159, 825, 157, 825, 150, 825, 149, 825, 145, 825, 143, 823, 140, 824, 139, 824, 135, 824, 131, 824, 127, 821, 120, 818, 118, 816, 116, 812, 115, 804, 115, 797, 119, 792, 126, 782, 130, 776, 134, 768, 133, 762, 132, 748, 132, 737, 130, 723, 129, 716, 128, 707, 124, 695, 123, 685, 120, 677, 117, 664, 116, 658, 114, 646, 114, 640, 115, 631, 117, 615, 119, 604, 118, 586, 119, 570, 120, 558, 123, 546, 120, 534, 116, 514, 115, 502, 112, 484, 112, 475, 112, 472, 113, 458, 113, 442, 114, 428, 117, 416, 121, 401, 125, 389, 131, 375\" />";
$area[3] = "<area href=\"#\" part=\"D\" data-part=\"Dos\" shape=\"poly\" coords=\"132, 359, 153, 363, 172, 366, 191, 367, 211, 368, 232, 366, 251, 362, 263, 359, 269, 353, 270, 341, 270, 330, 268, 321, 266, 307, 268, 298, 273, 285, 278, 274, 277, 259, 276, 247, 275, 239, 275, 231, 275, 223, 274, 213, 274, 196, 274, 185, 273, 174, 272, 163, 271, 152, 270, 143, 259, 139, 250, 136, 243, 133, 230, 139, 218, 141, 210, 142, 179, 141, 171, 139, 163, 136, 157, 133, 147, 138, 139, 141, 134, 143, 133, 152, 132, 170, 132, 177, 131, 199, 131, 211, 130, 225, 130, 236, 128, 247, 128, 259, 127, 268, 127, 277, 130, 286, 134, 293, 136, 302, 135, 312, 134, 324, 134, 336, 133, 347\" />";
$area[4] = "<area href=\"#\" part=\"C\" data-part=\"Cou\" shape=\"poly\" coords=\"167, 94, 173, 97, 181, 103, 190, 110, 202, 114, 213, 111, 222, 106, 229, 97, 234, 96, 233, 104, 233, 116, 234, 124, 236, 129, 239, 131, 232, 136, 222, 138, 211, 139, 201, 139, 193, 139, 182, 139, 173, 137, 167, 134, 161, 131, 161, 130, 167, 127, 170, 124, 170, 117, 170, 111, 169, 105, 168, 100\" />";
$area[5] = "<area href=\"#\" part=\"MSD\" data-part=\"Membre supérieur Droit\" shape=\"poly\" coords=\"273, 144, 288, 147, 297, 151, 306, 155, 312, 165, 318, 183, 322, 195, 324, 210, 322, 221, 325, 231, 328, 245, 327, 255, 330, 267, 333, 279, 336, 289, 341, 309, 345, 325, 348, 344, 348, 360, 352, 375, 356, 391, 322, 402, 318, 393, 313, 381, 307, 372, 301, 359, 296, 351, 293, 340, 291, 329, 289, 314, 287, 295, 285, 286, 282, 276, 279, 266\" />";
$area[6] = "<area href=\"#\" part=\"MSG\" data-part=\"Membre supérieur Gauche\" shape=\"poly\" coords=\"125, 268, 119, 284, 116, 299, 112, 322, 112, 333, 108, 345, 101, 357, 95, 375, 84, 394, 79, 404, 48, 395, 53, 368, 54, 356, 58, 331, 60, 316, 63, 302, 66, 290, 72, 280, 73, 264, 76, 251, 80, 231, 82, 222, 83, 213, 82, 192, 83, 186, 87, 177, 92, 163, 101, 155, 111, 149, 123, 145, 131, 144\" />";
然后根据TCPDF和您的需要设置一些样式:
// your style
$style['green'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(0, 230, 0));
$style['orange'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(242, 169, 33));
$style['red'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(255, 33, 33));
$colorGreen = array(198, 237, 189);
$colorOrange = array(239, 222, 189);
$colorRed = array(239, 184, 184);
然后添加这些功能:
function areaToPolygon($pdfObj, $area, $style, $fillColor)
{
$pdfObj->Polygon($area, 'DF', array('all' => $style), $fillColor);
}
function parseArrayArea($html)
{
$matches = array();
preg_match('/coords=.*"/', $html, $matches);
$area = array_map('intval', array_map('trim', explode(',', str_replace('"', '', str_replace('coords="','', $matches[0])))));
$area = array_map('parseAreaPoint', $area);
return $area;
}
function parseAreaPoint($point)
{
return $point/2;
}
在parseAreaPoint函数中,您可以根据需要修改划分。喜欢 ($point/3)
最后像下面这样调用函数:(请在循环中执行此操作,因为它伤害了我的眼睛哈哈顺便说一句,这是一个例子所以没关系)
$parsed_area = parseArrayArea($area[0]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
$parsed_area = parseArrayArea($area[1]);
areaToPolygon($pdf, $parsed_area, $style['orange'], $colorOrange);
$parsed_area = parseArrayArea($area[2]);
areaToPolygon($pdf, $parsed_area, $style['red'], $colorRed);
$parsed_area = parseArrayArea($area[3]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
$parsed_area = parseArrayArea($area[4]);
areaToPolygon($pdf, $parsed_area, $style['orange'], $colorOrange);
$parsed_area = parseArrayArea($area[5]);
areaToPolygon($pdf, $parsed_area, $style['red'], $colorRed);
$parsed_area = parseArrayArea($area[6]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
给你!看
body map
希望对您有所帮助。 :)
您可以绕过这些代码。
如果您还有任何问题,请不要犹豫。
编辑:
如果您需要在 x/y 轴上移动,您还可以稍微修改 parseAreaPoint
。
(区域中的 x 和 y 轴是这样工作的:x1、y1、x2、y2 ...)
我想知道是否可以在 PHP 中将地图面积为 HTML 的图像转换为 PDF。
用TCPDF,包含图像不是问题,然后绘制表格。但是要完美地绘制出我图像上的每个区域几乎是不可能的。
<img src="body.jpg" class="img-fluid" id="map-image" style="width: 280px; max-width: 280px; height: auto;" alt="" usemap="#map" />
<map id="map" name="map">
<area href="#" part="MD" data-part="Main Droite" shape="poly" coords="324, 406, 356, 396, 357, 403, 363, 406, 368, 410, 374, 415, 378, 419, 381, 424, 385, 427, 389, 434, 392, 439, 391, 444, 386, 447, 381, 447, 378, 444, 377, 451, 376, 464, 376, 477, 377, 485, 375, 491, 369, 493, 367, 497, 365, 500, 358, 498, 356, 496, 351, 496, 347, 494, 345, 487, 342, 489, 335, 490, 332, 485, 331, 473, 329, 459, 325, 449, 325, 434, 325, 418" />
<area href="#" part="MG" data-part="Main Gauche" shape="poly" coords="45, 401, 79, 410, 79, 422, 79, 436, 79, 446, 77, 460, 75, 473, 72, 482, 70, 488, 65, 490, 61, 487, 59, 482, 56, 491, 55, 497, 52, 498, 47, 497, 45, 500, 41, 502, 37, 500, 35, 497, 35, 492, 31, 491, 28, 488, 28, 484, 28, 478, 28, 468, 28, 456, 28, 450, 28, 444, 22, 444, 14, 446, 12, 443, 11, 437, 14, 434, 17, 429, 23, 423, 28, 420, 35, 413, 42, 407" />
<area href="#" part="MI" data-part="Membres inférieurs" shape="poly" coords="131, 363, 146, 366, 168, 369, 196, 371, 223, 371, 248, 366, 265, 363, 270, 359, 278, 382, 283, 405, 287, 423, 291, 438, 291, 463, 291, 479, 290, 493, 289, 507, 287, 527, 284, 540, 282, 548, 283, 559, 286, 570, 287, 582, 286, 595, 284, 605, 288, 619, 289, 632, 289, 644, 290, 658, 286, 670, 284, 683, 279, 695, 279, 707, 275, 719, 273, 732, 271, 743, 271, 754, 271, 767, 273, 777, 277, 784, 281, 789, 287, 797, 288, 803, 288, 811, 287, 814, 283, 819, 279, 821, 275, 823, 271, 824, 268, 826, 264, 825, 260, 823, 257, 825, 251, 825, 246, 824, 241, 818, 238, 809, 238, 797, 238, 789, 237, 778, 237, 767, 237, 763, 234, 758, 234, 753, 236, 744, 239, 741, 243, 737, 243, 724, 244, 717, 241, 702, 238, 688, 236, 682, 235, 669, 234, 658, 234, 647, 234, 638, 235, 626, 237, 613, 237, 607, 234, 598, 231, 593, 229, 583, 229, 576, 229, 571, 227, 564, 225, 558, 223, 549, 223, 540, 222, 530, 220, 522, 218, 516, 212, 502, 210, 490, 209, 484, 207, 475, 206, 464, 206, 455, 202, 452, 198, 452, 199, 461, 198, 475, 196, 487, 193, 497, 191, 505, 188, 515, 187, 520, 184, 528, 183, 534, 182, 541, 180, 549, 179, 555, 177, 560, 175, 566, 175, 574, 175, 580, 173, 590, 171, 597, 167, 606, 167, 613, 168, 623, 170, 635, 170, 638, 171, 644, 169, 654, 169, 668, 168, 679, 165, 691, 161, 703, 162, 710, 162, 723, 162, 731, 163, 737, 165, 743, 169, 750, 172, 755, 169, 762, 169, 774, 168, 784, 168, 789, 167, 802, 167, 807, 164, 815, 163, 818, 159, 825, 157, 825, 150, 825, 149, 825, 145, 825, 143, 823, 140, 824, 139, 824, 135, 824, 131, 824, 127, 821, 120, 818, 118, 816, 116, 812, 115, 804, 115, 797, 119, 792, 126, 782, 130, 776, 134, 768, 133, 762, 132, 748, 132, 737, 130, 723, 129, 716, 128, 707, 124, 695, 123, 685, 120, 677, 117, 664, 116, 658, 114, 646, 114, 640, 115, 631, 117, 615, 119, 604, 118, 586, 119, 570, 120, 558, 123, 546, 120, 534, 116, 514, 115, 502, 112, 484, 112, 475, 112, 472, 113, 458, 113, 442, 114, 428, 117, 416, 121, 401, 125, 389, 131, 375" />
<area href="#" part="D" data-part="Dos" shape="poly" coords="132, 359, 153, 363, 172, 366, 191, 367, 211, 368, 232, 366, 251, 362, 263, 359, 269, 353, 270, 341, 270, 330, 268, 321, 266, 307, 268, 298, 273, 285, 278, 274, 277, 259, 276, 247, 275, 239, 275, 231, 275, 223, 274, 213, 274, 196, 274, 185, 273, 174, 272, 163, 271, 152, 270, 143, 259, 139, 250, 136, 243, 133, 230, 139, 218, 141, 210, 142, 179, 141, 171, 139, 163, 136, 157, 133, 147, 138, 139, 141, 134, 143, 133, 152, 132, 170, 132, 177, 131, 199, 131, 211, 130, 225, 130, 236, 128, 247, 128, 259, 127, 268, 127, 277, 130, 286, 134, 293, 136, 302, 135, 312, 134, 324, 134, 336, 133, 347" />
<area href="#" part="C" data-part="Cou" shape="poly" coords="167, 94, 173, 97, 181, 103, 190, 110, 202, 114, 213, 111, 222, 106, 229, 97, 234, 96, 233, 104, 233, 116, 234, 124, 236, 129, 239, 131, 232, 136, 222, 138, 211, 139, 201, 139, 193, 139, 182, 139, 173, 137, 167, 134, 161, 131, 161, 130, 167, 127, 170, 124, 170, 117, 170, 111, 169, 105, 168, 100" />
<area href="#" part="MSD" data-part="Membre supérieur Droit" shape="poly" coords="273, 144, 288, 147, 297, 151, 306, 155, 312, 165, 318, 183, 322, 195, 324, 210, 322, 221, 325, 231, 328, 245, 327, 255, 330, 267, 333, 279, 336, 289, 341, 309, 345, 325, 348, 344, 348, 360, 352, 375, 356, 391, 322, 402, 318, 393, 313, 381, 307, 372, 301, 359, 296, 351, 293, 340, 291, 329, 289, 314, 287, 295, 285, 286, 282, 276, 279, 266" />
<area href="#" part="MSG" data-part="Membre supérieur Gauche" shape="poly" coords="125, 268, 119, 284, 116, 299, 112, 322, 112, 333, 108, 345, 101, 357, 95, 375, 84, 394, 79, 404, 48, 395, 53, 368, 54, 356, 58, 331, 60, 316, 63, 302, 66, 290, 72, 280, 73, 264, 76, 251, 80, 231, 82, 222, 83, 213, 82, 192, 83, 186, 87, 177, 92, 163, 101, 155, 111, 149, 123, 145, 131, 144" />
</map>
如果可能的话,我想用一些颜色等将这些区域绘制成 PDF...
谢谢
编辑: 至少,可以将 html 地图区域(使用 ImageMapster)转换为 PNG 或 JPEG 图像?
AFAIK,您可以直接使用从 html 到 TCPDF 的区域。
首先从 html 获取您的区域,例如:
// your areas
$area[0] = "<area href=\"#\" part=\"MD\" data-part=\"Main Droite\" shape=\"poly\" coords=\"324, 406, 356, 396, 357, 403, 363, 406, 368, 410, 374, 415, 378, 419, 381, 424, 385, 427, 389, 434, 392, 439, 391, 444, 386, 447, 381, 447, 378, 444, 377, 451, 376, 464, 376, 477, 377, 485, 375, 491, 369, 493, 367, 497, 365, 500, 358, 498, 356, 496, 351, 496, 347, 494, 345, 487, 342, 489, 335, 490, 332, 485, 331, 473, 329, 459, 325, 449, 325, 434, 325, 418\" />";
$area[1] = "<area href=\"#\" part=\"MG\" data-part=\"Main Gauche\" shape=\"poly\" coords=\"45, 401, 79, 410, 79, 422, 79, 436, 79, 446, 77, 460, 75, 473, 72, 482, 70, 488, 65, 490, 61, 487, 59, 482, 56, 491, 55, 497, 52, 498, 47, 497, 45, 500, 41, 502, 37, 500, 35, 497, 35, 492, 31, 491, 28, 488, 28, 484, 28, 478, 28, 468, 28, 456, 28, 450, 28, 444, 22, 444, 14, 446, 12, 443, 11, 437, 14, 434, 17, 429, 23, 423, 28, 420, 35, 413, 42, 407\" />";
$area[2] = "<area href=\"#\" part=\"MI\" data-part=\"Membres inférieurs\" shape=\"poly\" coords=\"131, 363, 146, 366, 168, 369, 196, 371, 223, 371, 248, 366, 265, 363, 270, 359, 278, 382, 283, 405, 287, 423, 291, 438, 291, 463, 291, 479, 290, 493, 289, 507, 287, 527, 284, 540, 282, 548, 283, 559, 286, 570, 287, 582, 286, 595, 284, 605, 288, 619, 289, 632, 289, 644, 290, 658, 286, 670, 284, 683, 279, 695, 279, 707, 275, 719, 273, 732, 271, 743, 271, 754, 271, 767, 273, 777, 277, 784, 281, 789, 287, 797, 288, 803, 288, 811, 287, 814, 283, 819, 279, 821, 275, 823, 271, 824, 268, 826, 264, 825, 260, 823, 257, 825, 251, 825, 246, 824, 241, 818, 238, 809, 238, 797, 238, 789, 237, 778, 237, 767, 237, 763, 234, 758, 234, 753, 236, 744, 239, 741, 243, 737, 243, 724, 244, 717, 241, 702, 238, 688, 236, 682, 235, 669, 234, 658, 234, 647, 234, 638, 235, 626, 237, 613, 237, 607, 234, 598, 231, 593, 229, 583, 229, 576, 229, 571, 227, 564, 225, 558, 223, 549, 223, 540, 222, 530, 220, 522, 218, 516, 212, 502, 210, 490, 209, 484, 207, 475, 206, 464, 206, 455, 202, 452, 198, 452, 199, 461, 198, 475, 196, 487, 193, 497, 191, 505, 188, 515, 187, 520, 184, 528, 183, 534, 182, 541, 180, 549, 179, 555, 177, 560, 175, 566, 175, 574, 175, 580, 173, 590, 171, 597, 167, 606, 167, 613, 168, 623, 170, 635, 170, 638, 171, 644, 169, 654, 169, 668, 168, 679, 165, 691, 161, 703, 162, 710, 162, 723, 162, 731, 163, 737, 165, 743, 169, 750, 172, 755, 169, 762, 169, 774, 168, 784, 168, 789, 167, 802, 167, 807, 164, 815, 163, 818, 159, 825, 157, 825, 150, 825, 149, 825, 145, 825, 143, 823, 140, 824, 139, 824, 135, 824, 131, 824, 127, 821, 120, 818, 118, 816, 116, 812, 115, 804, 115, 797, 119, 792, 126, 782, 130, 776, 134, 768, 133, 762, 132, 748, 132, 737, 130, 723, 129, 716, 128, 707, 124, 695, 123, 685, 120, 677, 117, 664, 116, 658, 114, 646, 114, 640, 115, 631, 117, 615, 119, 604, 118, 586, 119, 570, 120, 558, 123, 546, 120, 534, 116, 514, 115, 502, 112, 484, 112, 475, 112, 472, 113, 458, 113, 442, 114, 428, 117, 416, 121, 401, 125, 389, 131, 375\" />";
$area[3] = "<area href=\"#\" part=\"D\" data-part=\"Dos\" shape=\"poly\" coords=\"132, 359, 153, 363, 172, 366, 191, 367, 211, 368, 232, 366, 251, 362, 263, 359, 269, 353, 270, 341, 270, 330, 268, 321, 266, 307, 268, 298, 273, 285, 278, 274, 277, 259, 276, 247, 275, 239, 275, 231, 275, 223, 274, 213, 274, 196, 274, 185, 273, 174, 272, 163, 271, 152, 270, 143, 259, 139, 250, 136, 243, 133, 230, 139, 218, 141, 210, 142, 179, 141, 171, 139, 163, 136, 157, 133, 147, 138, 139, 141, 134, 143, 133, 152, 132, 170, 132, 177, 131, 199, 131, 211, 130, 225, 130, 236, 128, 247, 128, 259, 127, 268, 127, 277, 130, 286, 134, 293, 136, 302, 135, 312, 134, 324, 134, 336, 133, 347\" />";
$area[4] = "<area href=\"#\" part=\"C\" data-part=\"Cou\" shape=\"poly\" coords=\"167, 94, 173, 97, 181, 103, 190, 110, 202, 114, 213, 111, 222, 106, 229, 97, 234, 96, 233, 104, 233, 116, 234, 124, 236, 129, 239, 131, 232, 136, 222, 138, 211, 139, 201, 139, 193, 139, 182, 139, 173, 137, 167, 134, 161, 131, 161, 130, 167, 127, 170, 124, 170, 117, 170, 111, 169, 105, 168, 100\" />";
$area[5] = "<area href=\"#\" part=\"MSD\" data-part=\"Membre supérieur Droit\" shape=\"poly\" coords=\"273, 144, 288, 147, 297, 151, 306, 155, 312, 165, 318, 183, 322, 195, 324, 210, 322, 221, 325, 231, 328, 245, 327, 255, 330, 267, 333, 279, 336, 289, 341, 309, 345, 325, 348, 344, 348, 360, 352, 375, 356, 391, 322, 402, 318, 393, 313, 381, 307, 372, 301, 359, 296, 351, 293, 340, 291, 329, 289, 314, 287, 295, 285, 286, 282, 276, 279, 266\" />";
$area[6] = "<area href=\"#\" part=\"MSG\" data-part=\"Membre supérieur Gauche\" shape=\"poly\" coords=\"125, 268, 119, 284, 116, 299, 112, 322, 112, 333, 108, 345, 101, 357, 95, 375, 84, 394, 79, 404, 48, 395, 53, 368, 54, 356, 58, 331, 60, 316, 63, 302, 66, 290, 72, 280, 73, 264, 76, 251, 80, 231, 82, 222, 83, 213, 82, 192, 83, 186, 87, 177, 92, 163, 101, 155, 111, 149, 123, 145, 131, 144\" />";
然后根据TCPDF和您的需要设置一些样式:
// your style
$style['green'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(0, 230, 0));
$style['orange'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(242, 169, 33));
$style['red'] = array('width' => 0.5, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(255, 33, 33));
$colorGreen = array(198, 237, 189);
$colorOrange = array(239, 222, 189);
$colorRed = array(239, 184, 184);
然后添加这些功能:
function areaToPolygon($pdfObj, $area, $style, $fillColor)
{
$pdfObj->Polygon($area, 'DF', array('all' => $style), $fillColor);
}
function parseArrayArea($html)
{
$matches = array();
preg_match('/coords=.*"/', $html, $matches);
$area = array_map('intval', array_map('trim', explode(',', str_replace('"', '', str_replace('coords="','', $matches[0])))));
$area = array_map('parseAreaPoint', $area);
return $area;
}
function parseAreaPoint($point)
{
return $point/2;
}
在parseAreaPoint函数中,您可以根据需要修改划分。喜欢 ($point/3)
最后像下面这样调用函数:(请在循环中执行此操作,因为它伤害了我的眼睛哈哈顺便说一句,这是一个例子所以没关系)
$parsed_area = parseArrayArea($area[0]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
$parsed_area = parseArrayArea($area[1]);
areaToPolygon($pdf, $parsed_area, $style['orange'], $colorOrange);
$parsed_area = parseArrayArea($area[2]);
areaToPolygon($pdf, $parsed_area, $style['red'], $colorRed);
$parsed_area = parseArrayArea($area[3]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
$parsed_area = parseArrayArea($area[4]);
areaToPolygon($pdf, $parsed_area, $style['orange'], $colorOrange);
$parsed_area = parseArrayArea($area[5]);
areaToPolygon($pdf, $parsed_area, $style['red'], $colorRed);
$parsed_area = parseArrayArea($area[6]);
areaToPolygon($pdf, $parsed_area, $style['green'], $colorGreen);
给你!看 body map
希望对您有所帮助。 :)
您可以绕过这些代码。
如果您还有任何问题,请不要犹豫。
编辑:
如果您需要在 x/y 轴上移动,您还可以稍微修改 parseAreaPoint
。
(区域中的 x 和 y 轴是这样工作的:x1、y1、x2、y2 ...)